Vue CLI的使用

什么是Vue CLI

---

1. 如果你只是简单写几个 Vue 的 Demo程序，那么你不需要Vue CLI。
2. 如果在开发大型项目，那么就需要并且必然需要使用Vue CLI。
   • 使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
   • 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
3. CLI是什么意思？
   • CLI 是 Command-Line Interface，翻译为命令行界面，但是俗称脚手架。
   • Vue CLI 是一个官方发布 vue.js 项目脚手架。
   • 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。
4. 脚手架长什么样子？

Vue CLI 使用前提

---

node

1. Vue CLI 的使用前提是 Node 。
2. 安装NodeJS
   • 可以直接在官方网站中下载安装。
   • 网址：http://nodejs.cn/download/
3. 检测安装的版本
   • 默认情况下自动安装 Node 和 NPM
   • Node 环境要求8.9以上或者更高版本。
4. 什么是 NPM 呢？
   • NPM 的全称是Node Package Manager。
   • 是一个 NodeJS包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。
   • 后续会使用 NPM 来安装一些开发过程中依赖包。

cnpm 安装

1. 由于国内直接使用 npm 的官方镜像是非常慢的，所以推荐使用淘宝 NPM 镜像。

2. 可以使用淘宝定制的 cnpm （gzip 压缩支持）命令行工具代替默认的 npm：

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

   这样就可以使用 cnpm 命令来安装模块了：

   cnpm install [name]
   

Webpack

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

webpack 的全局安装

• npm install webpack -g

Vue CLI 的使用

---

安装

1. 安装 Vue 脚手架

   • npm install -g @vue/cli 。
   • 也可以使用 yarn global add @vue/cli 。
   • 一般情况下使用全局安装就可以了。

2. 安装完成之后，可以使用 vue --wersion 来检查安装的脚手架版本是否正确（3.x）。

3. 注意：上面安装的是 Vue CLI3 的版本，如果需要想按照 Vue CLI2 的方式初始化项目是不可以的。

   • 拉取 2.x 模板（旧版本）

     • Vue CLI3 和旧版使用了相同的 vue 命令，所以 Vue CLI2（vue-cli）被覆盖了。如果仍然想要使用旧版本的vue init功能，可以安装一个桥接工具。

     npm install -g @vue/cli-init
     # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
     

初始化项目

• Vue CLI2 初始化项目

  vue init webpack my-project
  

• Vue CLI3 初始化项目

  vue creat my-project
  

配置项目

? Project name	// 项目名称
? Project description	// 项目描述
? Author	// 作者

// 选择使用 Runtime + Compiler 还是 Runtime-only
? Vue build (Use arrow keys)
	Runtime + Compiler ...
	Runtime-only ...