使用脚手架Vue CLI搭建前端项目

前端队长Daotin
1,432 阅读5分钟

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

以下正文：

背景

公司需要做一个新系统，需要用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最新更新时间
v2v2.9.32018.2.5v2.5.112017.12.15
v3v3.4.12019.2.1v2.5.222019.1.12
v3.5.02019.3.6v2.6.72019.2.22
v4v4.5.152021.3.17v2.6.112019.12.14
v3.0.02020.9.18

vue-cli3和4区别：

内容区别：dev.to/sfbdev/what…

Vue2和3区别：

搭建的项目结构区别：

vue-cli2

vue-cli 2

vue-cli3

image.png

注意： 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的区别：www.infoq.cn/article/ski…

  • 新功能：

    • 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

image.png 选项含义：

  • 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 测试。

我的选择项：

image.png

参考文档：segmentfault.com/a/119000001…

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，即可。

image.png

项目结构

为了使项目更加合理，我参考了市面上一些比较主流的前端项目结构，梳理了下面一个目录结构：

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 生成目录树结构，特别好用。

项目结构参考文章：

其他参考文档：

以上，如果你看了觉不错就点个赞叭，这样队长也有更新下去的动力哦~

最近热门文章：

avatar
文章
阅读
粉丝