Vue开发指南
编辑人 版本 日期
张岩 V 0.1 2020-05
目录
Vue开发指南
目录
- 开发工具
1.1 Visual Studio Code（推荐）
1.2 WebStorm - 开发环境搭建
2.1 安装Node.js
2.2 安装Vue
2.3 安装Vue-CLI（旧版本2.x）
2.4 创建项目
2.5 运行项目
2.6 打包项目
2.7 安装Vue CLI 3.x - 开发框架和功能组件
3.1 Vue
3.2 Element
3.3 VueX
3.4 VueRouter
3.5 Axios详解
3.6 ES6以后新版特性
3.7 Css3高级功能
3.8 Sass
3.9 Echarts
3.10 TypeScript
1.1 Visual Studio Code（推荐）
1.1.1 下载
官网下载：https://code.visualstudio.com/
1.1.2 汉化中文
点击插件按钮搜索 Chinese, 在弹出的选项中选择第一个中文简体
1.1.3 Vscode更换主题
File（文件）- Preferences（首选项）- Color-Theme （颜色主题）
1.1.4 常用快捷键
Ctrl + / （单行注释）
Shift + Alt + A （多行注释）若要取消单行或多行注释在按一次该快捷键即可
Ctrl + Shift + Enter （上方插入一行，鼠标光标在当前行的任意位置都可以直接换行到上一行）
Ctrl + Enter （下方插入一行，鼠标光标在当前行的任意位置都可以直接换行到下一行）
Alt + Shift + F （格式化代码，不需要全选中代码，直接格式化即可）
Ctrl + Shift + F （查找文件）
1.2 WebStorm
官方下载地址：https://www.jetbrains.com/webstorm/
2. 开发环境搭建
2.1 安装Node.js
2.1.1 下载
官方下载地址：https://nodejs.org/en/
2.1.2 设置全局模块和缓存路径
在nodejs安装路径下，新建node_global和node_cache两个文件夹
设置缓存文件夹
npm config set cache “D:\vueProject\nodejs\node_cache”
设置全局模块存放路径
npm config set prefix “D:\vueProject\nodejs\node_global”
2.1.3 系统变量
新增系统变量NODE_PATH
2.2 安装Vue
npm install vue -g
2.3 安装Vue-CLI（旧版本2.x）
cnpm install vue-cli -g
2.4 创建项目
打开存放新建项目的文件夹
打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录
根据模版创建新项目
在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。
vue init webpack-simple mytest
初始化完成后的项目目录结构如下：
安装工程依赖模块
定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules
cd mytest
npm install
2.5 运行项目
npm run dev
2.6 打包项目
npm run build
2.7 安装Vue CLI 3.x
2.7.1 安装说明
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
2.7.2 安装
npm install -g @vue/cli
检查其版本是否正确 (3.x)：vue --version
2.7.3 创建项目
运行以下命令来创建一个新项目：
vue create hello-world
2.7.4 运行项目
npm run serve
3. 开发框架和功能组件
3.1 Vue
官方指南：https://cn.vuejs.org/v2/guide/
3.2 Element
官方开发组件：https://element.eleme.cn/#/zh-CN/component/installation
3.3 VueX
官方指南：https://vuex.vuejs.org/zh/guide/
3.4 VueRouter
官方指南：https://router.vuejs.org/zh/guide/essentials/named-routes.html
3.5 Axios详解
3.5.1 基础使用
安装：
$ npm install axios
执行 GET 请求
axios.get(’/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行 POST 请求
axios.post(’/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone’
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
响应结构
某个请求的响应包含以下信息
{
// data 由服务器提供的响应
data: {},
// status 来自服务器响应的 HTTP 状态码
status: 200,
// statusText 来自服务器响应的 HTTP 状态信息
statusText: ‘OK’,
// headers 服务器响应的头
headers: {},
// config 是为请求提供的配置信息
config: {},
// ‘request’
// request is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
3.5.2 创建实例
可以使用自定义配置新建一个 axios 实例
const instance = axios.create({
baseURL: ‘https://some-domain.com/api/’,
timeout: 1000,
headers: {‘X-Custom-Header’: ‘foobar’}
});
3.6 ES新版特性
3.6.1 ES6新特性（2015）
3.6.1.1 类（class）
class Animal {
// 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
constructor(name,color) {
this.name = name;
this.color = color;
}
// toString 是原型对象上的属性
toString() {
console.log(‘name:’ + this.name + ‘,color:’ + this.color);
}
}
var animal = new Animal(‘dog’,‘white’);//实例化Animal
animal.toString();
console.log(animal.hasOwnProperty(‘name’)); //true
console.log(animal.hasOwnProperty(‘toString’)); // false
console.log(animal.proto.hasOwnProperty(‘toString’)); // true
class Cat extends Animal {
constructor(action) {
// 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
// 如果没有置顶consructor,默认带super函数的constructor将会被添加、
super(‘cat’,‘white’);
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat(‘catch’)
cat.toString();
// 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
console.log(cat instanceof Cat); // true
console.log(cat instanceof Animal); // true
3.6.1.2 模块化(Module)
模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。
导出(export)
//test.js
var name = ‘Rainbow’;
var age = ‘24’;
export {name, age};
// myModule.js
export function myModule(someArg) {
return someArg;
}
导入(import)
import {myModule} from ‘myModule’;// main.js
import {name,age} from ‘test’;// test.js
3.6.1.3 箭头（Arrow）函数
基础语法
通常函数的定义方法：
var fn1 = function(a, b) {
return a + b
}
function fn2(a, b) {
return a + b
}
使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体：
var fn1 = (a, b) => {
return a + b
}
(a, b) => {
return a + b
}
当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。
// 无参
var fn1 = function() {}
var fn1 = () => {}
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
// 可变参数
var fn4 = function(a, b, …args) {}
var fn4 = (a, b, …args) => {}
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return
() => return ‘hello’
(a, b) => a + b
(a) => {
a = a + 1
return a
}
如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ … }有语法冲突。
注意，用小括号包含大括号则是对象的定义，而非函数主体
x => {key: x} // 报错
x => ({key: x}) // 正确
3.6.1.4 函数参数默认值
ES6支持在定义函数的时候为其设置默认值：
function foo(height = 50, color = ‘red’)
{
}
3.6.1.5 模板字符串
ES6支持模板字符串，使得字符串的拼接更加的简洁、直观。
var name = 'Your name is ’ + first + ’ ’ + last + ‘.’
使用模板字符串：
var name = Your name is ${first} ${last}.
在ES6中通过${}就可以完成字符串的拼接，只需要将变量放在大括号之中。
3.6.1.6 解构赋值
解构赋值语法是JavaScript的一种表达式，可以方便的从数组或者对象中快速提取值赋给定义的变量。
获取数组中的值
从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。
var foo = [“one”, “two”, “three”, “four”];
var [one, two, three] = foo;
console.log(one); // “one”
console.log(two); // “two”
console.log(three); // “three”
//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // “one”
console.log(last); // “four”
//你也可以这样写
var a, b; //先声明变量
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
如果没有从数组中的获取到值，你可以为变量设置一个默认值。
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
通过解构赋值可以方便的交换两个变量的值。
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
获取对象中的值
const student = {
name:‘Ming’,
age:‘18’,
city:‘Shanghai’
};
const {name,age,city} = student;
console.log(name); // “Ming”
console.log(age); // “18”
console.log(city); // “Shanghai”
3.6.1.7 延展操作符(Spread operator)
3.6.1.8 对象属性简写
在ES6中允许我们在设置一个对象的属性的时候不指定属性名。
const name=‘Ming’,age=‘18’,city=‘Shanghai’;
const student = {
name:name,
age:age,
city:city
};
console.log(student);//{name: “Ming”, age: “18”, city: “Shanghai”}
写为：
const name=‘Ming’,age=‘18’,city=‘Shanghai’;
const student = {
name,
age,
city
};
console.log(student);//{name: “Ming”, age: “18”, city: “Shanghai”}
3.6.1.9 Promise
Promise 是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
var waitSecond = new Promise(function(resolve, reject)
{
setTimeout(resolve, 1000);
});
waitSecond
.then(function()
{
console.log(“Hello”); // 1秒后输出"Hello"
return waitSecond;
})
.then(function()
{
console.log(“Hi”); // 2秒后输出"Hi"
});
3.6.1.10 支持let与const
3.6.2 ES7新特性（2016）
3.6.2.1 Array.prototype.includes()
数组includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。
includes 函数与 indexOf 函数很相似，下面两个表达式是等价的：
arr.includes(x)
arr.indexOf(x) >= 0
3.6.2.2 指数操作符
在ES7中引入了指数运算符**，具有与Math.pow(…)等效的计算结果。
console.log(Math.pow(2, 10)); // 输出1024
console.log(210);// 输出1024
使用指数运算符**，就像+、-等操作符一样
3.6.3 ES8新特性（2017）
3.6.3.1 async/await
在我们处理异步的时候，比起回调函数，Promise的then方法会显得较为简洁和清晰，但是在处理多个彼此之间相互依赖的请求的时候，就会显的有些累赘。这时候，用async和await更加优雅
async/await使用规则一：凡是在前面添加了async的函数在执行后都会自动返回一个Promise对象.即便代码里test函数什么都没返回，我们依然打出了Promise对象
async function test() {
}
let result = test()
console.log(result) //Promise {: undefined}
async/await使用规则二：await必须在async函数里使用，不能单独使用
async/await使用规则三：await后面需要跟Promise对象，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。
// 正确的例子：
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘success’)
})
})
}
async test() {
let result = await fn() //因为fn会返回一个Promise对象
console.log(result) //这里会打出Promise成功后传递过来的’success’
}
test()
// 没有意义的例子（不会报错）：
async test() {
let result = await 123
console.log(result)
}
test()
3.6.3.2 Object.values()
const obj = {a: 1, b: 2, c: 3};
const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]
//使用Object.values() :ES8
const values=Object.values(obj1);
console.log(values);//[1, 2, 3]
3.6.3.3 Object.entries()
Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。
接下来我们来遍历上文中的obj对象的所有属性的key和value：
Object.keys(obj).forEach(key=>{
console.log(‘key:’+key+’ value:’+obj[key]);
})
//key:a value:1
//key:b value:2
//key:c value:3
使用Object.entries() :ES8
for(let [key,value] of Object.entries(obj1)){
console.log(key: ${key} value:${value})
}
//key:a value:1
//key:b value:2
//key:c value:3
3.6.3.4 String padding
PadStart 和 PadEnd 函数可向左、右填充字符串（如空格）
String.padStart(targetLength,[padString])
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "。
String.padEnd(targetLength,padString])
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString:(可选) 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "；
示例：
// padStart:
‘abc’.padStart(6);
// <- ’ abc’
‘abc’.padStart(2);
// <- ‘abc’
‘abc’.padStart(5, ‘x’);
// <- ‘xxabc’
‘abc’.padStart(7, ‘xo’);
// <- ‘xoxoabc’
‘abc’.padStart(6, ‘xo’);
// <- ‘xoxabc’
‘12’.padStart(10, ‘YYYY-MM-DD’);
// <- ‘YYYY-MM-12’
‘09-12’.padStart(10, ‘YYYY-MM-DD’);
// <- ‘YYYY-09-12’
// padEnd:
‘123’.padEnd(6);
// <- '123 ’
‘123’.padEnd(6, ‘x’);
// <- ‘123xxx’
‘123’.padEnd(6, ‘123456’);
// <- ‘123123’
‘2016’.padEnd(10, ‘YYYY-MM-DD’);
// <- ‘2016YYYY-M’
3.6.3.5 函数中允许尾随逗号参数
foo(
‘a’,
‘b’,
‘c’, // this threw a Parse Error before Node 8
);
3.7 Css3高级功能
3.7.1 动画特效
基础用法
属性：
值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animation-play-state 规定控制动画的播放状态
兼容设置：
@keyframes mymove
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes mymove /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes mymove /* Opera */
{
from {background: red;}
to {background: yellow;}
}
3.7.2 Flex 布局
3.7.2.1 基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3.7.2.2 容器的属性
3.7.2.2.1 flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
3.7.2.2.2 flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
3.7.2.2.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: || ;
}
3.7.2.2.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
3.7.2.2.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
3.7.2.2.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
3.7.2.3 项目的属性
3.7.2.3.1 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: ;
}
3.7.2.3.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: ; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3.7.2.3.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: ; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
3.7.2.3.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
3.7.2.3.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
3.7.2.3.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
3.8 Sass
官方指导：https://www.sass.hk/guide/
3.9 Echarts
官方文档：https://echarts.apache.org/zh/api.html#echarts
3.10 TypeScript
官方文档：https://www.tslang.cn/docs/release-notes/typescript-3.1.html
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
