闫小玉
闫小玉

Vue入门笔记

一、 如何阅读框架式代码Vue

前言

这里假设你已经安装好了vue-cli，node，npm（npm 是 JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码，管理项目依赖关系）等框架及工具，接下来怎么通过cmd打开项目

npm的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如以安装express模块（Express 是一个简洁而灵活的 node.js Web应用框架， 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具，可以设置中间件来响应 HTTP 请求）为例：
npm install express # 本地安装
npm install express -g # 全局安装

如果出现以下错误： npm err! Error: connect ECONNREFUSED 127.0.0.1:8087 解决办法为：
$npm config set proxy null 打开v

vue代码需要配置npm（每个项目都要安装一次），打开项目文件夹cmd

npm i /npm install
（npm本地安装，自动安装 package.json文件中的dependencies和devDependencies中的属性对应的包名，安装项目到项目目录 ./node_modules 下，不会将模块依赖写入devDependencies或dependencies。 区别在于：npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号；安装报错时intall肯定会出现npm-debug.log 文件，npm i不一定 ；用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉 ）

npm axios --save-dev（可简写为-D，会把X包安装到node_modules目录中；插件被写入到 devDependencies对象里面，只用于开发环境，不用于生产环境；之后运行npm install命令时，会自动安装X到node_modules目录中）
npm axios --save（可简写为-S，会把X包安装到node_modules目录中；插件被写入到 dependencies对象里面去，是需要发布到生产环境的；之后运行npm install命令时，会自动安装X到node_modules目录中）
**以上：运行时需要用到的包使用–save，否则使用–save-dev。**

npm -v（查看版本号）
npm start (打开项目 会自动打开默认页面   vue2.0适用)
npm run serve（打开项目 默认页面为local：80XX   vue3.0适用）
如果想更新已安装模块，就要用到npm update命令。

Vue入门笔记_第1张图片

【注】创建的时候切记不要在文件夹名称中添加.&/等奇怪的字符，否则打开很容易报错。

入门

简单来说，所有前端代码的基本信息除了在readme上了解，还有一个就是package.json文件。Vue的核心在src文件中的main.js（入口文件），下面来看一下vue-lic的结构文件说明（转载于https://www.jianshu.com/p/f4e95663e10d）：

注意，vue的组件模板只能有一个根元素（https://www.jb51.net/article/165887.htm）

1、src文件夹

这个是最最最最主要的开发阵地，大部分的实现效果都要认准它

Vue入门笔记_第2张图片

assets文件夹——静态资源文件夹

如单独的css，js（一般vue项目可以不用，统一写在app.less文件中）

components——公共组件

公用的组件，意思就是很多组件都会用到某一个组件，那放到这里就没错了。

routes——路由文件

顾名思义，就是放路由的地方。
路由的涉及路径：
1、首先要设一个本地的serverUrl的json文件，用于存放域名数组（可在外部或者文件夹内部）
2、其次在src文件夹中编写routes.js文件
Vue入门笔记_第3张图片
再把routes给 export出去，表示本地下可以在vue 打开localhost:8080/configItmTypeManage转到对应的功能页面，其中configItmTypeManage是从配置项类型页面的index.vue中export出来的
3、同时在services下设置configtype.js设置axios要访问的域名和参数，比如：
Vue入门笔记_第4张图片
然后就可以配置项类型页面的index.vue中引用了

import configTypeQuery from "@/services/configtype";
export default {  
	name: "configTypeManage",//这个name传给了2中的routes.js文件
	data() :{
		const columns=[...];
		//构建新建页面数据结构    
		const defaultFormData = {...};
		return{...};
	}
	computed:{...//记录一些页码的实时计算方式，生成字典啥的 
	},
	methods:{...
		fetch() {      
			const config = {        
				...configTypeQuery,        
				params: {          
					limit: this.pagination.pageSize,
					start: this.pagination.pageSize *(this.pagination.current - 1),          
					functionId:this.functionId,          
					languageId:0        
					}      
			};      
			console.log(config);      
			this.loading = true;     //defaultFormData 里的参数
			this.Axios(config).then(({ data }) => {
			        this.loading = false;        
			        if (data.success) {
			       		this.list = data.data;//点后面data要看后端返回来字段
			       		this.pagination.total = data.count;        
			       		}      
			 });    
		},
	...
	}
}
App.vue——根组件

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

  1. template其中模板只能包含一个父节点，为的简写，是子路由视图，后面的路由页面都显示在此处。
  2. scriptvue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。
  3. style样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，
    Vue入门笔记_第5张图片
app.less—— css样式文件
//例：画分割线的样式，引用时

.cell_dashed{    
// border-bottom:1px dashed #dbdbdb;    
// height:0rem;    
// margin-left: 0px;    
// margin-right: 0px;    
position: relative;    
margin-left: 0px;    
margin-right: 0px;    
height: 1px;    
background-color: #e9e9e9;    
color: rgb(223, 223, 223);
  }
main.js——入口文件

主要是引入vue框架，根组件及路由设置，并且定义vue实例。
Vue入门笔记_第6张图片
比较有用的像router，vue，axios都会在此处加载，import中：

Vue-I18n：为常用的 中英文页面版本切换 插件，使用方法可参考（https://blog.csdn.net/weixin_34320159/article/details/88945180）
vue-router：是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用（这让页面无刷新体验，这个应该是最显著的有点，由于路由分发直接在浏览器端完成，页面是不刷新，对用户的响应非常及时，因此提升了用户体验；）。既然是单页应用（SPA），那么整个项目有以下三个文件是必要的:一个html文件：index.html；一个webpack打包时的入口js文件：main.js；一个根vue组件，作为其他组件的挂载点：app.vue。如果项目规整，你可以在src中与main.js同级的地方写一个router.js，然后main.js去调用它，否则可以写在main文件中。使用方法可参考（https://blog.csdn.net/sinat_17775997/article/details/60978700）
Element-ui：
axios：

Vue入门笔记_第7张图片
这里的vueConfig.json不是在本地的json文件，是到测试环节时，需要改换url地址，此时不可能来改前端的server配置，所以他们会新建一个server的json文件，然后axios直接去访问，如果出错则再跳回到本地server访问。

qs：
Router：

Vue入门笔记_第8张图片
mode取值说明：
（1）histroy：URL就像正常的 url，示例：http://localhost:8080/home。hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。【注】：凡是涉及充值的页面，不能做成带hash路由的的页面！，于是也要用history模式
（2）hash：默认值，会多一个“#”，示例：http://localhost:8080/#/home。 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。但需要后台配置支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。

base是指定 部署全部vue的仓库路径，相当于一个后端访问前端的一个入口

前端除了在router内改写mode，还需要确保config/index.js中的build下的
`assetsPublicPath: ‘/’,
是绝对路径就可以了，这里的assetsPublicPath指的就是上面的base路径

使用mode同时需要后端配置Apache
在httpd-vhosts.conf文件中把目录指向项目index.html文件所在的位置

#Virtual Hosts
#<VirtualHost *:80>
ServerName localhostDocumentRoot D:/wamp64/www/huanzuan/dist
<Directory "D:/wamp64/www/huanzuan/dist">
Options Indexes FollowSymLinks   
	AllowOverride All
	Order allow,deny   
	Allow from all
</Directory>
</VirtualHost>

然后再 index.html文件的同级路径下 创建.htaccess文件

<IfModule mod_rewrite.c> 
	RewriteEngine On RewriteBase /
	RewriteRule ^index\.html$ - [L] 
	RewriteCond %{REQUEST_FILENAME} !-f 
	RewriteCond %{REQUEST_FILENAME} !-d 
	RewriteRule . /index.html [L]
</IfModule>

内容就是官方文档给的 一点都不用改

Api：https://router.vuejs.org/zh/guide/essentials/history-mode.html

【注】：请不要和index中的assetsPublicPath混了，后者是后端访问前端的

filter

Vue入门笔记_第9张图片
vue过滤器，上述表达为全局过滤器，表示的是只要有names字段，就进行下面的function操作，注意全局注册时是filter，没有s。而组件过滤器是filters，是有s的，这要注意了，虽然你些的时候没有s报错，但是过滤器是没有效果的

2、public文件夹

【注】：关于vue-cli 3.0版本的改动，原来放在static下的文件，现在应该放在public文件夹下，vue3.0 对脚手架的结构和静态文件的引用方式都进行了简化！

主要包含index.html文件，如其他html一样，但一般只定义一个空的根节点，最外层的页面一般title等都设置在这里。在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。入口文件，浏览器第一眼看到的就是它。
Vue入门笔记_第10张图片
没有此文件夹的情况？那么index.html文件会放在外部。

3、node_modules文件夹

npm或者cnpm所下载的依赖包，根据npm install来安装，无需部署上线和传递，有package.json让别人自己下载就行

4、package.json

查询可支持的script命令有哪些
查询依赖的包文件有哪些：当npm install的时候会根据dependencies来安装相应的包

5、package-lock.json

锁定安装时的包的版本号，说人话就是，你的npm下载了一堆依赖，如果别人在npm install的时候，会默认下载最新版本的依赖，but新的版本不一定会兼容旧的啊，那别人可能就跑不起来你的项目了，这个时候，package-lock.json出来把你的版本锁定，这样别人npm install的时候，也就只能下载和你一样的版本了。

6、build文件夹：

webpack的相关配置，里边的各种命令vue脚手架已经帮我们配置好了。

7、config文件夹：

vue的基本配置文件，比如端口号监听，打包输出等等。

8、dist文件夹：

打包后的文件都在这，也就是说你运行npm run build之后产生的压缩后的 计算机可识别的文件 都在这里 ，开发完后，把它们直接扔到你的web服务器上，就是部署上线。

9、static文件夹：

图片啥的你可以放到这，一般没有用，会有一个默认的gitkeep文件

10、.gitignore：

git忽略文件，提交代码的时候，告诉git，某些东西不要提交，比如node_modules文件夹，这玩意占总体积80%以上，总不能每次提交代码都要上传他们。

11、.editorconfig .babelrc .postcssrc.js

分别是编辑器配置、es6语法编译配置、postcss配置，默认即可

二、插件

1、axios

关于axios的拦截器是一个作用非常大，非常好用的东西。分为请求拦截器和响应拦截器两种：
1、请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如加入token
    .......
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

或者（使用兰姆达表达式，下方代码同理）

axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么，例如加入token
    .......
    return config;
  }, 
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2、响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么，例如跳转到登录页
    ......
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

3、移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

使用实例：

axios使用在common下的单独js文件中，具体使用时axios内部的request方法可重写：
Vue入门笔记_第11张图片
下面这一部分是用来给url加入浏览器实时返回的token的，采用了正则匹配的方法去截取accessToken属性。vue常常会因为域问题而访问出错，所以要和后端完善接口信息。Vue入门笔记_第12张图片
Vue入门笔记_第13张图片
tips：

  1. 在使用axios中，我们可以通过Mock模拟数据，实现开发的前后段分离，且它不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；可以通过随机数据，模拟各种场景。

2、qs

在登录时使用axios请求数据传参时无法正常的获取数据。之后也是一通百度，发现原因是传递参数要将参数序列化。简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

4、router

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。
点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: ‘/home’, component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 标签所在的地方。所有的这些实现才是基于hash 实现的。

三、功能（按照代码阅读顺序记录）

１、export default

https://blog.csdn.net/weixin_43318134/article/details/99242459（非常全面）

２、props

用于组件之间的传递，但props是单向绑定的，如果要实现双向绑定，可以参考3、4

３、.sync修饰符

vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决。用法如下：

<text-document :title.sync="doc.title"></text-document>

当子组件需要更新 title 的值时，它需要显式地触发一个更新事件：
this.$emit('update:title', newValue)

这样title的属性在子组件内部更新，父组件也能感知的到，实现了“双向绑定”。

４、getValueFromEvent

在子组件的input标签中的一个专用属性，用例如下

<a-input
	v-decorator="[              
	`name-${i}`,
	 {                
	 	rules: [                
	 	{                  
	 		required: true,                  
	 		message: '请填写配置项名称！'                
	 	}               
	 	],                
	 	initialValue:formData.list[i].name,                
	 	getValueFromEvent:(e) => inputChangeList(e, 'name', i)              
	 	}              
	 	]"              
	 	maxlength="128"
          />

可参考ant-design-vue中的解读
Vue入门笔记_第14张图片

四、vue语句常用记录

1、v-bind 指令，HTML 属性中的值使用 v-bind 指令，参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
2、v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">

同时按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

3、v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

[注]
Vue入门笔记_第15张图片

4、computer & methods，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

5、按键修饰符，Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right

6、 v-model 指令，在表单控件元素上创建双向数据绑定。可以完成输入

文本框：

<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>

复选框：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

单选框：

<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>

select列表：