初识Vue CLI

什么是Vue CLI?

• 我们之前直接在HTML上面写的Vue代码都叫Demo小程序，它并不需要Vue CLI
• 但如果在开发大型项目的时候，就需要用到Vue CLI了
  （1）因为使用Vue.js开发大型应用的时候，需要着手考虑代码目录结构、项目结构和部署、热加载等等。
  （2）但认真想想，如果每一个项目都要手动完成这些无味的配置工作，无疑效率非常低效，所以慢慢的，就有人开发出了绞手架的存在，通常我们会直接使用现成的脚手架工具来帮助我们完成这些配置工作。

CLI又是什么意思?

• CLI是Command-Line Interface,中文是命令行界面的意思，俗称脚手架，其实脚手架又是个建筑学的概念，有点万丈高楼平地起的意思，需要我们一步一步地从地基开始往上搭建支撑的架子。
• Vue.js的官方发布了一个项目脚手架,也就是Vue CLI
• 使用vue-cli可以帮助我们快速搭建Vue开发环境和对应webpack的配置（繁琐）。

Vue CLI使用前提 - 需要安装Node

• 官网直接下载nodejs
• node安装完成后，会自带一个NPM包管理工具

什么是NPM呢？

• NPM的全称是Node Package Manager
• NPM是一个NodeJS的包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准，有点类似我们手机上的应用商店。
• 我们会经常使用NPM来安装一些开发过程中所依赖的包。

什么是CNPM?

• 由于国内直接使用npm的官方镜像去安装依赖包，有时候不得不说是非常慢的，甚至还会出现卡壳崩掉的情况，于是乎，出现了淘宝镜像,也就是所谓cnpm。
• cnpm是淘宝定制（gzip压缩支持）的命令行工具，用于代替默认的npm。
• cnpm它的指令和npm是一致的，用的时候将npm改成cnpm即可。
• 可以说cnpm的出现就是为了弥补npm安装的慢慢慢情况。
• 淘宝镜像的安装：

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

Vue CLI使用前提 - 依赖Webpack

• 因为Vue.js官方发布的脚手架工具就是使用了webpack模板构架配置的，webpack会对所有的资源进行压缩优化操作，除此之外，它在开发的过程中还提供了一套完整的功能，能够让我们高效开发项目。
• Webpack的全局安装

npm install webpack -g

Vue CLI的使用

安装Vue脚手架

npm install -g @vue/cli

• 默认安装的是Vue CLI3的版本，第三代版本是向下兼容的，如果需要使用Vue CLI2的版本，需要做拉取的操作。

vue-cli官网有安装教程：https://cli.vuejs.org/zh/

使用Vue CLI2版本创建注意事项及解释

• 初始化操作等待（第一次初始化操作时间有点长，要耐心等待）

  
  
  image.png

image.png

image.png

使用Vue CLI3版本创建注意事项及解释

• 首先使用vue create projectName 创建项目(projectName，就是给你的项目去一个好听的名字，命名只允许全英文小写，大写不支持)
  
  
  
  image.png