1.什么是Vue CLI
官网:https://cli.vuejs.org/zh/
■如果你只是简单写几个Vue的Demo程序那么你不需要Vue CLI.
■如果你在开发大型项目,那么你需要,并且必然需要使用Vue CUI
-
使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情.
-
如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
■CU是什么意思?
- CL是Command-Line Interface,翻译为命令行界面,但是俗称脚手架.
- Vue CLI是一个官方发布vue.js项目脚手架
- 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.
2.Vue CLI使用前提- Node
■安装NodeJS
-
可以直接在官方网站中下载安装
-
网址: http://nodejs .cn/download/
■检测安装的版本
- 默认情况下自动安装Node和NPM
- Node环境要求8.9以上或者更高版本
■什么是NPM呢?
- NPM的全称是Node Package Manager
- 是-个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
■cnpm安装
- 由于国内直接使用npm的官方镜像是非常慢的,这里推荐使用 淘宝NPM镜像。
- 可以使用淘宝定制的cnpm (gzip压缩支持)命令行工具代替默 认的npm
3.Vue CLI使用前提- Webpack
■Vue.js官方脚手架工具就使用了webpack模板
-
对所有的资源会压缩等优化操作
-
它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
■Webpack的全局安装(-g全局)
npm install webpack -g
4.Vue CLI的使用
■安装Vue脚手架(dos(win+r->cmd)中安装)
npm install -g @vue/cli
■注意:上面安装的是Vue CLI4版本,如果想按照cli2的方式初始化项目时是不可以的
拉取旧版本:cnpm install -g @vue/cli-init
新建一个文件夹,在文件夹中运行
vue init webpack my-project
新建项目,注意my-project项目名不要带有中文
安装完成后目录结构如下:
npm run build打包项目
package-lock.json中记录依赖的node相关模块真正应用到的版本
5.这里补充一个cli安装不上的问题
找到你电脑上的npm-cache文件夹(C:\Users\电脑用户名\AppData\Roaming中)删除(再删除之前先备份一下以免这个方法对你的电脑不好使)之后管理员权限运行DOS->cmd执行语句npm clean cache -force
,之后再运行cli安装语句
6.runtimecompiler和runtimeonly
注意创建项目的时候vue build选项选择对应的runtimecompiler和runtimeonly
- 安装runtimecompiler
- 安装runtimeonly
- 如果在安装时打开了报错检测,可以去config/index.js文件下把useEslint值改为false
项目目录内容简介:
runtimecompiler和runtimeonly(区别)
■简单总结
-
如果在之后的开发中,你依然使用template ,就需要选择Runtime-Compiler
-
如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime -only
-
runtimecompiler中应用render
方法一:
方法二:
如果我们把runtimecompiler中的createElement里的组件cpn换成App,会发现和runtimeonly中的main.js结构一样了
-
但是我们发现runtimeonly中的App中也有template,那会不会only中也要经历template->ast这个过程呢?
答案是不会,template被编译出来的就是一个普通的对象,普通的对象里面已经将template渲染成render函数了。我们在main.js中console.log(App),会发现里面是没有template的
-
那么.vue文件中的template是由谁处理的了?
是由vue-template-compiler
我们之前在.vue文件封装处理的时候有安装vue-loader和vue-template-compiler,vue-loader用来加载.vue文件,vue-template-compiler用来解析
npm run build
npm run dev
7.修改配置:webpack.base.conf.js起别名
这个我之前在写项目的时候,公司有个框架,写那个框架的人在代码中写了一些缩写的别名,注意一下就可以了现在这里,看别人的代码发现不懂得看看这里是不是有取别名
8.认识vue cli4
vue-cli 3 与 2 版本有很大区别
-
vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
-
vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
-
vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
-
移除了static文件夹,新增了public文件夹,并且index.html移动到public中
创建项目(以下是cli4创建过程)
我跟着视频课学习是cli3的创建过程,目前cli3和cli4我只发现目录结构不一样了,后续又不一样的地方再写
vue create testcli4(项目名)
当我们下次再vue create testcli4创建项目时,会有选项让我们选择刚才建的这个项目的相关配置,
如果我们想删除之前的配置的话去C盘下的Users(用户)文件夹的当前电脑用户名文件夹下找到
当我们新创建文件时
会询问我们是否添加到git上,选择‘Add‘,新添加的文件从红变绿
webstorm的git操作使用https://www.cnblogs.com/yesu/p/10642385.html
目录结构解析
忽略掉项目名称建完之后我才发现我的是cli4
我们发现cli4相比较于cli2少了很多相关配置,那这些配置去哪了呢?
在这里
9.Vue UI
在终端或者dos运行都可以
vue ui
了解有这个东西就行先,以后在项目中用到了再另写一篇补充
10.箭头函数
基本使用
箭头函数: 也是一种定义函数的方式
- 定义函数的方式: function
const aaa = function () {}
- 对象自变量中定义函数
const obj = {
bbb() {}
}
- ES6中的箭头函数
const ccc = (参数列表) => {}
const ccc = () => {}
参数和返回值问题:
- 放入两个参数
const sum = (num1, num2) => {
return num1 + num2
}
- 放入一个参数
const power = num => {
return num * num
}
- 函数中,函数代码块中有多行代码时
const test = () => {
// 1.打印Hello World
console.log('Hello World');
// 2.打印Hello Vuejs
console.log('Hello Vuejs');
}
- 函数代码块中只有一行代码
const mul = (num1, num2) => {
return num1 + num2
}
const mul = (num1, num2) => num1 * num2
console.log(mul(20, 30));
main.js中的
render:h=>{
return h(App)
}
可以改写为
render:h=>h(App),
this的使用
- 什么时候使用箭头
setTimeout(function () {
console.log(this);//window
}, 1000)
setTimeout(() => {
console.log(this);//window
}, 1000)
- 问题: 箭头函数中的this是如何查找的了?
- 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
在obj对象中建一个函数aaa
const obj = {
aaa() {
setTimeout(function () {
console.log(this); // window
})
setTimeout(() => {
console.log(this); // obj对象
})
}
}
obj.aaa()
const obj = {
aaa() {
setTimeout(function () {
setTimeout(function () {
console.log(this); // window
})
setTimeout(() => {
console.log(this); // window
})
})
setTimeout(() => {
setTimeout(function () {
console.log(this); // window
})
setTimeout(() => {
console.log(this); // obj,找的是aaa中的this
})
})
}
}
obj.aaa()
可以理解为,这种格式的显示的都是window
setTimeout(function () {
console.log(this);
})
除了箭头函数,其他函数的this指向是谁调用的就指向谁
(以上内容根据微博“coderwhy”的vue视频课程整理)