Vue CLI ｜ 青训营笔记

---

theme: condensed-night-purple

highlight: a11y-dark

这是我参与「第四届青训营 」笔记创作活动的的第16天

什么是Vue CLI

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思?

• CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
• Vue CLI是一个官方发布 vue.js 项目脚手架
• 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置

使用前提 -- Node

什么是NPM呢? NPM的全称是Node Package Manager 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。 后续我们会经常使用NPM来安装一些开发过程中依赖包.

使用前提 -- Webpack

Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

Webpack的全局安装 npm install webpack -g

Vue CLI的使用

安装Vue脚手架

npm install @vue/cli@3.2.1 -g 和老师一样的版本

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。--在脚手架3上不可以用脚手架2的初始化方式，想要使用脚手架2的模板，需要使用命令拉取模板，才可以既3又2。

拉取脚手架2模板

脚手架3和旧版使用了相同的vue命令，所以2(vue-cli)被覆盖了，如果你仍然需要使用旧版本的vue init功能，我们可以全局安装一个桥接工具，(我们现在没有必要安装脚手架2，我们可以在3的基础上拉一个2的模板，使用2)

命令：npm install -g @vue/cli-init@3.2.0 vue init 的运行效果将会和vue-cli@2.x 相同

初始化项目

Vue CLI2初始化项目: vue init webpack my-project

一般情况下为webpack，在my-project项目里生成webpack配置文件

Vue CLI3初始化项目: vue create my-project