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查看
  
• 
•