1.什么是 Vue cli

• 当开发大型程序的时候，推荐使用 Vue Cli

• CLI == Command-Line Interface 脚手架

• 使用其可以快速的搭建 Vue 开发环境以及对应的 webpack 配置

2.使用前提

• node.js 的安装 http://nodejs.cn/download/
  

• 检测安装成功 node -v 、npm -v
  

• 其中 npm 是自动安装的，为包管理工具

• webpack 的全局安装 npm install webpack -g
  

• Vue Cli3 的安装 npm install -g @vue/cli@3.2.1
  

• Vue Cli2 的安装npm install -g @vue/cli-init，这样就可以既使用 2、也可以使用 3

3.Vue CLI2 详解

• 初始化项目：vue init webpack my-project

  
  注：图片来自视频课程：https://www.bilibili.com/video/BV15741177Eh?p=92
  

• 目录结构详解

  
  注：图片来自视频课程：https://www.bilibili.com/video/BV15741177Eh?p=93
  

• Runtime-Compiler 和 Runtime-only 的区别？

  
  
  

• 左边是 Runtime-Compile，右边是 Runtime-only

• 主要是 Runtime-only 少了编译过程，所以是轻量级的，

  
  
  

• 总结

• 如果在之后的开发中，你依然使用 template，就需要选择 Runtime-Compiler

• 如果你之后的开发中，使用的是.vue 文件夹开发，那么可以选择 Runtime-only

• 如果想更细致的了解内部原理：https://www.bilibili.com/video/BV15741177Eh?p=96
  

4.Vue CLI3 详解

• 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 中

• 初始化项目：vue create my-project

  
  
  

• 目录结构详解：

  
  注：图片来自视频课程：https://www.bilibili.com/video/BV15741177Eh?p=97
  

• 配置变成 ui 了,使用命令 npx vue ui查看