文章目录
- 一、Vue CLI2
- 1、Vue CLI使用前提,需要安装NodeJS和Webpack
- 2、Vue CLI的使用
- 3、Vue CLI2详解
- 4、Runtime-Compiler和Runtime-only的区别
- 5、使用 npm run build命令的执行过程
- 6、使用npm run dev的执行过程
- 7、修改配置:webpack.base.conf.js起别名
- 二、Vue CLI3
- 1、vue-cli 3 与 2 版本有很大区别
- 2、创建项目步骤分析
- 3、项目结构详解
- 4、配置文件去哪了
- 三、箭头函数
- 1、基本的使用
- 2、含参数或返回值
- 3、箭头函数中this的使用
一、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的使用
npm install -g @vue-cli
查看版本号:vue --version
注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。
Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init
vue init webpack my-project
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>
const aaa = function() {
}
const obj = {
bbb: function() {
}
}
const ccc = () => {
}
</script>
2、含参数或返回值
<script>
const sum = (num1,num2) => {
return num1 + num2
}
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);
},1000)
setTimeout(() => {
console.log(this);
},1000)
const obj = {
aaa() {
setTimeout(function() {
console.log(this);
},1000)
setTimeout(function() {
console.log(this);
},1000)
}
}
</script>
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)