使用脚手架Vue CLI搭建前端项目的一些总结

最新推荐文章于 2024-06-18 14:22:26 发布

前端队长

最新推荐文章于 2024-06-18 14:22:26 发布

阅读量787

点赞数

本文链接：https://blog.csdn.net/lvonve/article/details/121200444

版权

大家好，我是前端队长Daotin^[1]。想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。

以下正文：

背景

公司需要做一个新系统，需要用Vue CLI搭建一个长期可维护的前端框架，但是我对Vue CLI的版本对应的Vue的版本不是很熟悉，借此机会梳理一下。

目前有以下几个问题：

1.Vue CLI目前出到v4.5版本了，它和v2，v3有什么区别？2.Vue CLI每个版本会使用哪个版本的Vue框架？3.Vue3可以用到新项目吗？4.如果不能的话，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-cli 2

vue-cli 3

注意：1、Vue CLI工具在v2版本从npm下载是使用 npm i -g vue-cli，从v3版本开始vue-cli就会变成 @vue/cli 2、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^[2]•standard^[3]•Google^[4]

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

参考链接：

•JavaScript主流代码规范大对比^[5]•airbnb和google推荐的JS代码风格对比和介绍^[6]

项目中我们使用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/                  // ---工具层---
│   ├── 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 生成目录树结构，特别好用。

项目结构参考文章：

•https://lq782655835.github.io/blogs/team-standard/recommend-vue-project-structure.html

其他参考文档：

•关于public和assets目录的区别^[7]

引用链接

[1] 前端队长Daotin: https://daotin.github.io/about.html
[2] Airbnb: https://github.com/airbnb/javascript
[3] standard: https://github.com/standard/standard
[4] Google: https://google.github.io/styleguide/jsguide.html
[5] JavaScript主流代码规范大对比: https://juejin.cn/post/6844903974819086350
[6] airbnb和google推荐的JS代码风格对比和介绍: https://github.com/blackLearning/blackLearning.github.io/issues/12
[7] 关于public和assets目录的区别: https://www.jianshu.com/p/2754ff66b40e