背景
公司需要做一个新系统，需要用Vue CLI搭建一个长期可维护的前端框架，但是我对Vue CLI的版本对应的Vue的版本不是很熟悉，借此机会梳理一下。
目前有以下几个问题：
-
Vue CLI目前出到v4.5版本了，它和v2，v3有什么区别？
-
Vue CLI每个版本会使用哪个版本的Vue框架？
-
Vue3可以用到新项目吗？
-
如果不能的话，Vue2.5和Vue2.6有啥区别？
版本区别
Vue CLI版本区别
我用个表格详细区分下Vue CLI各个版本的区别：
| Vue CLI版本 | 最新版本 | Vue CLI最新更新时间 | 默认使用Vue版本 | Vue最新更新时间 |
| v2 | v2.9.3 | 2018.2.5 | v2.5.11 | 2017.12.15 |
| v3 | v3.4.1 | 2019.2.1 | v2.5.22 | 2019.1.12 |
| v3.5.0 | 2019.3.6 | v2.6.7 | 2019.2.22 | |
| v4 | v4.5.15 | 2021.3.17 | v2.6.11 | 2019.12.14 |
| v3.0.0 | 2020.9.18 |
vue-cli3和4区别：
内容区别：https://dev.to/sfbdev/what-s-new-and-updates-in-vue-cli-4-0-1f5c
Vue2和3区别：
搭建的项目结构区别：
vue-cli2
vue cli4
注意： 1、Vue CLI工具在v2版本从npm下载是使用
npm i -g vue-cli，从v3版本开始vue-cli就会变成@vue/cli2、Vue CLI在版本v4.5之后可以除了创建Vue2的项目，还可以创建Vue3.0的项目。
本着新项目用新技术的原则，我们应该用最稳定较新的版本。Vue3因为太过新，所以不使用。
使用Vue2.6是最好选择，但是由于我之前的项目都是Vue2.5的，那么Vue2.5和Vue2.6有哪些区别呢？很影响项目开发吗？
vue2.5和vue2.6区别
vue2.5和vue2.6的区别：https://www.infoq.cn/article/skim-5moykrbbgldhcom
-
新功能：
-
slot新语法，slot性能提升
-
异步错误处理
-
动态指令参数
-
显式创建单独的反应式对象
-
服务器端渲染期间的数据预取
-
新 ES 模块构建，可直接导入使用
-
-
优化：编译器警告消息中的代码帧
-
底层
-
让 nextTick 恢复使用 Microtask
-
通过 this.$scopedSlots 暴露的函数现在总是返回 Arrays
-
优点：
-
vue2.6发布时间很久，比较稳定，而且最新更新时间很近，对于新产品scv用2年前的不好
-
vue2.6可以使用最新的脚手架，目录结构更清晰简单
-
vue2.6与vue2.5新增修改的功能不多，用到的很少，还有一些只是底层的改进，用法不变
搭建过程
安装脚手架
npm i -g @vue/cli
创建项目
vue create hello-world
选项含义：
-
Choose Vue version选择Vue版本 -
Babel将采用 ES6语法编写的代码转换为ES5 -
TypeScript支持使用 TypeScript 书写源码。 -
Progressive Web App (PWA) Support PWA支持。 -
Router支持 vue-router 。 -
Vuex支持 vuex 。 -
CSS Pre-processors支持 CSS 预处理器。 -
Linter / Formatter支持代码风格检查和格式化。 -
Unit Testing支持单元测试。 -
E2E Testing支持 E2E 测试。
我的选择项：
参考文档：https://segmentfault.com/a/1190000017020755
eslint规范选择
为了方便，eslint直接使用目前主流的三种之一：
Airbnb号称是“最合理的编写 JavaScript 代码的方式”。Airbnb 是一家位于美国旧金山的公司，本文是其内部的 JavaScript编码规范，写得比较全面。在 Github 上有 88,897+ ⭐️，1,7152 + Fork，几乎覆盖了JavaScript的每一项特性。
standard，如果我不同意某条规则，可以改吗？不可以，制定这套 standard 规范的目的就是让大家都不必再花时间浪费在无谓的代码风格之争上面了。 github上有 22,392+ ⭐️，1,702+ Fork
Google，只有遵守了这里的规则，一个 JavaScript 源文件才能被称为“Google Style”。很霸气，我行我素，同时也被不少公司沿用。
严格程度：Airbnb > Google > standard
参考链接：
项目中我们使用standard，因为之前项目一直使用的是standard，所以为了照顾其他成员，也为了统一，所以就采用了standard（其实没有分号确实很难受 :( ）
VSCode和Webstorm如何使用eslint？
-
VSCode直接下载ESlint插件即可。
-
新版本的Webstorm自带ESlint功能，只需要在项目中找到
.esliontrc.js文件，然后右键选择Apply ESLint Code Style Rules，即可。
项目结构
为了使项目更加合理，我参考了市面上一些比较主流的前端项目结构，梳理了下面一个目录结构：
product-web/
├── public/ // 公用文件，不经过webpack处理，存放不需要修改的第三方资源（比如thingjs文件，uearth文件等，参考链接：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9）
│ ├── dependent/
│ ├── favicon.ico
│ └── index.html
├── src/
│ ├── api/ // ---接口层---
│ │ └── api.js
│ ├── assets/ // ---静态资源层---（css、image，js，font等项目资源
│ │ ├── css/
│ │ ├── font/
│ │ ├── img/
│ │ ├── js/
│ │ └── json/ // 组件配置文件
│ ├── components/ // ---组件层---
│ │ ├── common/ // 公共组件
│ │ └── home/ // 每个页面（如home页面）所有组件文件夹（如果里面有多个组件共用的组件，再加一层cpmponents）
│ ├── store/ // ---vuex数据层---
│ │ ├── actions.js
│ │ ├── index.js
│ │ ├── mutations.js
│ │ └── state.js
│ ├── utils/ // ---工具层---
│ │ ├── earth/ // 单独存放操作地图相关的js
│ │ └── packages/ // （一些临时类似npm组件化的模块代码，如果没有可以不需要该文件夹）
│ ├── views/ // ---UI页面层---
│ │ └── Home.vue
│ ├── App.vue // 主页面
│ ├── main.js // 主入口
│ └── router.js // 所有路由
├── tests/ // ---前端测试层---
│ └── unit/
│ └── example.spec.js
├── babel.config.js // babel配置
├── jest.config.js // jest 单元测试
├── package-lock.json
├── package.json
├── README.md
└── vue.config.js // vue-cli配置文件
PS：以上目录结构使用插件
tree-node-cli生成目录树结构，特别好用。
项目结构参考文章：
其他参考文档：
（完）