脚手架

「为减少重复性工作而做的重复性工作」的工具

例子

你要写一个项目0，源语言为ES6，用了sass, 后端是node.你每次完成一部分功能，你都要用把ES6编译到ES5、编译sass、压缩html文件。每次修改代码都要做的编译ES6、sass、压缩html这些就是重复性工作。
后来你知道了gulp, 然后你写了个gulp脚本，每次有代码改动，一句gulp build就帮你完成了上面说的这些重复性工作. 你写的gulp脚本就是为减少重复性工作而做的工作。你写完这个项目0之后，你又要写项目1，还是ES6、sass、后端node，还要完成之前的那些重复性工作. 这个时候你又为了这个项目写了一个类似gulp脚本。
后来你又写了项目2、项目3···，你每次都用相同的技术栈，每次的gulp脚本都大同小异，这时候你发现，写这么多gulp脚本也成了重复性工作. 这就是为减少重复性工作而做的重复性工作。
而脚手架就可以帮你减少这些为减少重复性工作而做的重复性工作. 脚手架一个命令，目录结构、gulp脚本、babel配置、空的测试文件都帮你搞好了. 直接写核心业务代码，不做重复性工作，这就是脚手架的作用。
当然一般不同的技术栈会有自己的目录结构、工作流程，所以很多前端框架比如vue、angular、 ember会有自己的脚手架工具（一般就叫XXX-cli）. yeoman也可以根据不同的生成器(generator)成为不同项目的脚手架工具

vue的脚手架：vue-cli、@vue/cli

vue脚手架版本目前有2,3,4
查看脚手架版本号

vue -V

vue-cli

vue-cli是版本2.x的脚手架
安装方式:

npm install -g vue-cli
或
npm install -g vue-cli@版本号

创建项目

vue init webpack 项目名称

Project name：项目名称
Project description：项目描述
Author：作者
Vue build：打包方式（standalone和runtime）,按回车选择默认的就好
Install vue-router?：是否安装路由？肯定是需要用到的，按 y 回车
Use ESLint to lint your code?：是否启用eslint代码检测规则？目前不需要，按 n 回车
Setup unit tests with Karma + Mocha?：是否进行单元测试？目前不需要，按 n 回车
Setup e2e tests with Nightwatch?：是否进行端对端测试？目前不需要，按 n 回车

配置完之后，输入命令cd demo进入我们的项目文件夹，输入命令code . 就能将项目在vscode编辑器里打开，最后输入命令npm run dev启动项目，最后在浏览器地址栏输入localhost:8080就可以访问项目了。

1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；

2）check-versions.js ==> 检查npm，node.js版本；

3）utils.js ==> 构建相关工具方法；

4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

5）webpack.base.conf.js ==> webpack基本配置；

6）webpack.dev.conf.js ==> webpack开发环境配置；

7）webpack.prod.conf.js ==> webpack生产环境配置；
　　　　
2、config：项目配置

1）dev.env.js ==> 开发环境变量；

2）index.js ==> 项目配置文件；

3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
　　　　2）components：组件目录，我们写的组件就放在这个目录里面；
　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；
　　　　4）App.vue：根组件；
　　　　5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、babelrc：babel编译参数
7、editorconfig：代码格式
8、gitignore：git上传需要忽略的文件配置
9、postcssrc.js：转换css的工具
10、index.html：首页入口文件，可以添加一些 meta 信息等、
11、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
12、README.md：项目的说明文档，markdown 格式

@vue/cli

@vue/cli是版本3以上的脚手架

npm install -g @vue/cli@版本号

创建项目

vue create project // project是项目名称

其他大同小异

@vue/cli3与vue-cli2的区别

@vue/cli3和vue-cli2的区别在于：

创建项目 vue create

启动项目 由npm run dev 改成 npm run serve

移除了配置文件目录 config 和 build 文件夹，如果需要自定义配置，需要自己新建vue.config.js文件

移除了 static 静态资源文件夹，新增 public 文件夹，静态资源转移到public目录中，通过/xx.xx可以直接访问，并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

安装项目时会自动下载node-model文件夹

---

Reference

1. https://blog.csdn.net/tsite/article/details/54630367
2. https://blog.csdn.net/qq_37635012/article/details/105522444