什么是 Vue CLI
如果你只是简单写几个 Vue 的 Demo 程序,那么你不需要 Vue CLI。但如果你在开发大型项目,那么你必然需要使用 Vue CLI。
-
使用 Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
-
如果每个项目都要手动完成这些工作,那无疑比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
-
CLI 是什么意思?
- CLI 是 Command-Line Interface,翻译为命令行界面,俗称脚手架。
- Vue CLI是一个官方发布 vue.js 项目脚手架。
- 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。
Vue CLI 使用前提 —— Node、Webpack
Vue CLI的使用
- 安装 Vue 脚手架
sudo npm install -g @vue/cli
![](https://i-blog.csdnimg.cn/blog_migrate/f906dded1d4b9d911f2f45cd6a326bb4.png)
可以通过运行以下命令来初始化项目:
vue create my-project
- 上面安装的是Vue CLI 3 的版本,如果我们还需要同时使用旧版本的
vue-init
功能初始化项目是不行的,我们还需要全局安装一个桥接工具来拉取 2.x 版本:
sudo npm install @vue/cli-init -g
![](https://i-blog.csdnimg.cn/blog_migrate/b65a0af4a316a6666f22eb36fc0b1f00.png)
Vue CLI 2 初始化项目:
vue init webpack my-project
Vue CLI2 初始化项目过程(视频教程 p91)
vue init webpack my-project
![](https://i-blog.csdnimg.cn/blog_migrate/c28037fe96ea4ddf62a5256e2b30f466.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f40acbeed61c2331197debb6c8e06566.png)
初始化完成:
- ESlint
ESLint是一个语法规则和代码风格的检查工具。
如果想要关闭Eslint,可在config/index.js
中修改:
![](https://i-blog.csdnimg.cn/blog_migrate/7a454e13e600465ff83c926c2ae3a299.png)
- runtime-compiler和 runtime-only 的区别(p95)
左:runtime-compiler
内部编译过程:template -> ast -> render -> vdom -> UI
右:runtime-only(性能更高,内部代码量更少)
内部编译过程:render -> vdom -> UI
总结:如果在之后的开发中,你依然使用 template,就需要选择runt