文章目录
一、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
扫描二维码关注公众号，回复：
12900793 查看本文章
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>
如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客