文章目录
一、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>
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客