vue-cli到底做了哪些事

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，快速搭建Vue.js项目。

vue cli内置了webpack的一些功能，这些是用webpack打包时需要我们自己配置的，例如：

1.ES6代码转换成ES5代码

2. scss/sass/less/stylus转css

3. .vue文件转换成js文件

4. 使用 jpg、png，font等资源文件

5. 自动添加css各浏览器产商的前缀

6. 代码热更新

7. 资源预加载

8. 每次构建代码清除之前生成的代码

9. 定义环境变量

10. 区分开发环境打包跟生产环境打包

选择模板的功能其实就是cli的功能, 通过使用不同的命令来初始化项目(比如vue init webpack myproject), 就是选择不同的模板; 至于webpack其实是选择的模板里面包含了webpack这个包;这个webpack跟模板其实没有关联, 就算没有安装vue-cli, 也可以直接用npm安装webpack;

npm是nodejs包管理器, 它会读取文件夹内部的package.json文件, 检查当前的项目需要哪些nodejs包来构成然后进行安装; vue init webpack这个命令选择的模板内部的package.json包含了webpack这个依赖包, 所以使用 vue init webpack myprojec初始化项目之后, 再使用npm install, npm就会根据项目的依赖自动给你安装webpack;