ES6和Vue-cli基础安装

Vue-Cli

零、前言

如果你在开发大型项目，那么你需要,并且必然需要使用Vue Cli。使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮

助完成这些事情。

CLI是什么意思? CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架.Vue CLI是一个官方发布vue.js项目脚手架 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.

一、cli入手

1.1、node安装和Webpack安装

1.1.1、node介绍

实现vue-cli的首先先安装node.js,node里面更多是使用其中的npm包管理。node.js是vue-cli开发的基础。npm（Node Package Manager，节点包管理器）是node.js的包管理器，用于节点插件的管理（包括安装，卸载和管理依赖等）。npm是随同新版的node一起安装的包管理工具，所以我们需要安装node。

npm的常见使用场景

1.允许用户从NPM服务器上下载别人编写的第三方包到本地使用。

2.允许用户从NPM服务器上下载并安装别人编写的命令行程序到本地使用。

3.允许用户将自己编写的包或命令行程序上传到NPM服务器上供别人使用。

为什么要用cnpm

npm服务器在国外，从官网下载对应的插件包，经常会出现下载缓慢或出现异常，这时便需要找到另外的方法提供稳定的下载，这个方法就是cnpm。阿里巴巴的淘宝团队把npm官网的插件都同步到了在中国的服务器，提供给我们从这个服务器上稳定下载资源。

安装语法：$ npm install -g cnpm --registry=https://registry.npm.taobao.org

1.1.2、webpack安装

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器

安装webpack：cnpm install webpack -g

1.2、vue-cli安装

安装命令：npm install -g @vue/cli 使用：cnpm install -g@vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行可以用这个命令来检查其版本是否正确：

检查命令：vue –version

 

 卸载：npm uninstall @vue/cli -g

1.3、创建项目

1.4、项目目录

 1.5 、UI界面创建

 

二、ES6特性

ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本），是JavaScript语言的下一代标准，2015年6月正式发布，从ES6开始的版本号采用年号，如ES2015，就是ES6。ES2016就是ES7。

 

 

ECMAScript是（浏览器脚本语言）规范，JS的规范的具体实现。

 

 2.1 、let声明变量

let特性1：严格作用域

let特性2：变量唯一声明

只能声明一次 对于同一个变量，let会唯一声明 但是声明后可以多次赋值

let特性3：let声明的变量，使用必须在声明后

2.2、const声明只读变量

2.3、解构表达式

2.3.1 数组结构

支持let arr = [1,2,3]; let [a,b,c] = arr;
这种语法将数组的值赋给多个变量　

2.3.2、对象解构

同样是简化对象赋值给变量的动作
 支持对象解析：const { name: abc, age, language } = person; 
冒号代表改名　

2.4、字符串拓展

2.4.1、字符串的判断Api

提供了一系列字符串的判断Api 
字符串.startsWith("XX") 判断是否以XX开头 返回值
true|false 
字符串.endsWith("XX") 判断是否以XX结尾 返回值
true|false 
字符串.includes("XX") 判断是否包含XX 返回值 
true|false

2.4.2、字符串中调用变量和表达式

可以将变量名和表达式写在 ${} 中 
1、${变量名} 表示可以取出变量的值 
2、${表达式()} 表示使用 表达式执行完之后的返回值 
注意：如果方法没有返回值则插入undefined

2.5、函数优化

2.5.1、函数参数默认值

2.5.2、不定参数

2.5.3、箭头函数

var 函数名 = (参数列表) => { 
函数体 
};

2.6、对象优化

1、对象Api
A、Object.keys(对象名) 获取指定对象的 所有属性
数组
B、Object.values(对象名) 获取指定对象的 所有
值数组
C、Object.entries(对象名) 获取指定对象的 所有
[属性,值]组成的数组
2、对象合并1
Object.assign(target, s1, s2);
将对象s1,s2合并到target中
3、声明对象简写
如果对象的属性值对应的变量名和属性名一致，可以省略
: 变量名
const age = 23
const name = "张三"2.7、map和reduce 数组操作Api
//声明对象简写 变量名和属性名一致，可以省略 :变量
名
const person2 = { age, name }
4、对象的函数属性简写
A、对象中箭头函数语法:
fn : (参数列表) => {
函数体
}
B、对象中函数可以省略function关键字
5、对象合并2---深拷贝
let 目标对象 = {...被合并对象1,...被合并对象
2}；

2.7、map和reduce 数组操作Api 

数组中新增了map和reduce方法。
数组.map(fn)：接收一个函数,
将原数组中的所有元素用这个函数处理后放入新数组并返回。
将原数组按照map中的既定函数处理，并返回处理后的新数组
reduce() 为数组中的每一个元素依次执行回调函数，
不包括数组中被删除或从未被赋值的元素，
arr.reduce(callback,[initialValue])
callback 回调函数
fn(prev,curr,index,arr) 内置四个参数
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 
2、currentValue （数组中当前被处理的元素） 
3、index （当前元素在数组中的索引） 
4、array （调用 reduce 的数组） [initialValue] 初始化值，可以省略　

2.8、ES6模块化规范中定义

模块化就是把代码进行拆分，方便重复利用。类似java中的导包:要使用一个包，必须先导包。 导入模块成员使用import关键字 暴露模块成员使用export关键字导出JS的某个代码模块,这里的代码模块包含有:基本类型变量、对象、函数、数组

语法：import 代码模块 from 路径/JS文件