Vue2快速入门（二）Cube-UI、Vuex、Axios、Vue-router概述和基础ES6知识点

前端项目技术组件

什么是Cube-UI？

基于 Vue.js 实现的精致移动端组件库，地址

什么是Vuex？

在Vue项目开发时使用的状态管理工具
state：存储数据
mutations：同步修改存储数据
actions: 异步修改存储数据
getters：获取存储数据前进行修改

什么是Axios？

是⼀个基于Promise 用于浏览器和 node.js 的 HTTP 客户端，从浏览器中创建 XMLHttpRequest，也可以 node.js 发出 http 请求，支持 Promise API，支持拦截请求和响应，并转换数据

什么是Vue-router？

Vue官方的路由管理器，实现页面前端路由：
Hash模式（默认）
History模式

ECMAScript 6常见语法快速入门

什么是ES6？

ECMAScript 6（简称ES6）目标是使得JavaScript语⾔可以用来编写复杂的⼤型应用程序，成为企业级开发语⾔

let、const 语法

let : 定义变量，推荐在函数中使用let 定义变量，⽽⾮var
const： 它可以声明⼀个常量（如果是普通的变量⼀般⼤写）

箭头函数

ES6 中，箭头函数就是函数的⼀种简写形式，使用括号包裹参数，跟⼀个 =>，紧接着
是函数体

//以前js定义函数
var sum = function(num1,num2) {
 return num1 + num2;
};

// 使⽤箭头函数
let sum = (num1,num2) => num1 + num2;

对象词法扩展

在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法

function getVideo(make, model, value) {
 return {
 // 简写变量
 make, // 等同于 make: make
 model, // 等同于 model: model
 value, // 等同于 value: value
 };
}
let video = getVideo('java', 'java', 99);
 output: {
 make: 'java',
 model:'java',
 value: 99,
}

解构赋值

⼀种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'

ES6中导出/导入模块

1、export default 向外暴露的成员可以使用任意的变量来接收

注意：在⼀个模块中只能使用export default向外暴露⼀次

// 导出
// user.js
export default {
 name: 'xdclass.net',
 age: 10
}

// 导入
// main.js
import xd from './user'
// xd 为⼀个包含 name 和 age 属性的对象

2、export 向外暴露的成员只能使⽤ {} 接收，这叫按需导出

注意：⼀个模块中可以同时使用 export default 和 export 暴露成员

//导出方式1
// user.js
export default {
 name: 'xdclass.net',
 age: 10
}
//导出方式2
export var teacher = "⼩滴课堂-⼆当家⼩D"
export var content = '全栈⼯程，和隔壁⽼王⽐较熟悉'

//导入方式1，2
//main.js
import xd, { teacher,content } from './user'