Vue CLI（脚手架）

一、Vue CLI2

1、Vue CLI使用前提，需要安装NodeJS和Webpack

NodeJS官网下载安装：http://nodejs.cn/download

安装webpack命令：npm install webpack -g

检查安装的版本：

node -v
npm -v
webpack -v

2、Vue CLI的使用

• 安装Vue脚手架（全局安装）

npm install -g @vue-cli

查看版本号：vue --version

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。

• 拉取2.x模板（旧版本）

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

• Vue CLI2初始化项目

vue init webpack my-project

• Vue CLI3初始化项目

vue create my-project

3、Vue CLI2详解

• 初始化项目详解
  
• 目录结构详解
  

4、Runtime-Compiler和Runtime-only的区别

• 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
• 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

5、使用 npm run build命令的执行过程

6、使用npm run dev的执行过程

7、修改配置：webpack.base.conf.js起别名

resolve: {
	extensions: ['.js','.vue','.json']
	alias: {
		'@': resolve('src'),
		'pages': resolve('src/pages'),
		'common': resolve('src/common'),
		'components': resolve('src/components'),
		'network': resolve('src/network')
	}
}

二、Vue CLI3

1、vue-cli 3 与 2 版本有很大区别

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是webpack 3
• vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录。
• vue-cli 3 提供了vue ui 命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2、创建项目步骤分析

如果想要删除刚刚自己的配置保存下来的配置，需要在c盘用户下面找.vuerc文件，删除对应的配置

3、项目结构详解

4、配置文件去哪了

一种方式是使用图形化界面查看，另一种方式查看vue配置文件。

三、箭头函数

1、基本的使用

<script>
//箭头函数：也是一种定义函数的方式
//1.定义函数的方式：function
const aaa = function() {

}

//2.对象字面量中定义函数
const obj = {
	bbb: function() {
	
	}
}

//3、ES6中的箭头函数
const ccc = () => {

}
</script>

2、含参数或返回值

<script>
//1.放两个参数问题
const sum = (num1,num2) => {
	return num1 + num2
}

//2.放一个参数问题：可以省略括号
const power = num1 => {
	return num1 * num
}

//函数代码中有多行代码
const test = () => {
	console.log('hello world');
	console.log('hello world');
}

//函数代码中只有一行代码
const mul = (num1, num2) => {
	return num1 + num2
}
//或者
const mul = (num1, num2) => num1 + num2
</script>

3、箭头函数中this的使用

<script>
setTimeout(function() {
	console.log(this);	//window
},1000)
	
setTimeout(() => {
	console.log(this);	//window
},1000)

//问题：箭头函数中的this是如何查找的？
//答案：向外层作用域中，一层层查找this，直到有this的定义。
const obj = {
	aaa() {
		setTimeout(function() {
			console.log(this);	//window
		},1000)
		
		setTimeout(function() {
			console.log(this);	//obj对象
		},1000)
	}
}
</script>