Vue CLI 3 快速搭建项目

╰+哭是因爲堅強的太久メ 2022-03-30 10:58 368阅读 0赞

### Vue CLI 3 快速搭建项目 ###

*  Vue CLI 简介
 *  安装Vue CLI 3
 *  新建项目
 *  配置项目
 *  文件结构
 *  脚本
 *   *  运行开发服务器
     *  构建到生产环境
     *  代码检查
     *  单元测试
 *  参考

# Vue CLI 简介 #

Vue CLI是一个用于开发Vue.js项目的脚手架工具，人们在用Vue开发项目时往往要用到很多的插件以及打包工具，而Vue CLI的存在帮助开发者省去了手动配置开发工具的麻烦，以用户界面的方式让开发者能在几分钟内快速初始化项目，把重点放在开发上。

实际上，Vue CLI是基于webpack和webpack-dev-server的，官方文档也有说明，你也可以手动进行配置。不过，Vue CLI 3的初始化步骤已经非常简便，即使不了解webpack，也可以用Vue CLI进行开发和生产。本文针对想用Vue CLI快速初始化项目的开发者，对webpack具体的配置将略过。

# 安装Vue CLI 3 #

本文将使用`npm`作为包管理器，你也可以使用`yarn`，这里不做过多说明。

npm install -g @vue/cli

查看Vue CLI的版本

vue --version

本文写作时的版本为3.2.3

# 新建项目 #

vue create my-app

你可以将上面的`my-app`替换成你自己的项目的名称

# 配置项目 #

接下来你就要在命令行中进行配置了  
![预设][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70]  
首先你需要决定是否使用预设配置，这里本来应该只有后两个选项，由于我之前已经用Vue CLI初始化过项目并保存了配置，我现在可以直接使用我此前保存过的配置选项来初始化。你也可以选择官方的默认配置，只用`babel`和`eslint`。我们这里选择最后一个选项，手动配置。

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 1]  
在这里你就可以选择你的项目需要的功能了，简单说明一下这几个功能。

*  `Babel`：用Babel来转译JavaScript
 *  `TypeScript`：TypeScript支持
 *  `Progressive Web App (PWA) Support`：渐进式网页应用支持
 *  `Router`：是否使用Vue Router
 *  `Vuex`：是否使用Vuex
 *  `CSS Pre-processors`：是否使用CSS预处理器（如Sass，Less都是常见的CSS预处理器）
 *  `Linter / Formatter`：代码检测，代码风格检测，代码格式化
 *  `Unit Testing`：单元测试
 *  `E2E Testing`：E2E测试

这里我使用我个人常用的几个选项进行初始化，如图。

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 2]  
首先是关于Vue Router的问题，是否使用history模式。如果使用history模式需要在后端额外的配置，Vue Router默认的是hash模式，这种情况下你的url里会出现一个`#`，看起来比较丑。如果要了解更多关于Vue Router的history模式，请移步[官方文档][Link 1]。为了操作方便我这里使用默认的hash模式，输入`n`。

--------------------

![CSS预处理器][CSS]  
接下来我们要选择一个CSS预处理器，请根据个人习惯选择，我个人习惯使用Sass，这里选择`Sass/SCSS`。

--------------------

![ESLint][]  
接下来我们要为`ESLint`选择一种代码风格，简单介绍一下这几个选项。

*  `ESLint with error prevention only`：仅对产生报错的代码提出警告
 *  `ESLint + Airbnb config`：使用[Airbnb风格][Airbnb]的代码
 *  `ESLint + Standard config`：使用[Standard风格][Standard]的代码
 *  `ESLint + Prettier`：使用[Prettier][]对代码进行格式化

根据你的开发习惯进行选择，我个人偏好使用Airbnb规则，Airbnb规则非常严格，但能有效保证代码的可读性和效率，对个人的编码规范也是一种提升。

--------------------

![Lint时机][Lint]  
这是让我们选择代码风格检查的时间，`Lint on save`是当保存时检查，`Lint and fix on commit`是在提交代码时进行检查和自动修复。如果是个人的项目一般就选择保存时检查，团队有需要时选择第二项，这里我们选择`Lint on save`。

--------------------

![单元测试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 3]  
选择单元测试工具，这里只有两个选项，我个人更熟悉`Mocha`，所以我这里选择`Mocha + Chai`。

--------------------

![配置文件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 4]  
这里我们要选择如`Babel`，`PostCSS`，`ESLint`配置文件的存放方式，`In dedicated config files`是让配置文件独立存放，`In package.json`是把配置文件都写在`package.json`文件中，为了管理方便我个人更喜欢单独存放。

--------------------

![保存预设][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 5]  
最后要选择是否保存这次的配置选项，如果保存了就会像开头一样，当你下次用Vue CLI初始化项目时会有一个直接使用已保存预设配置的选项。

这一步选择完毕后，Vue CLI就会自动安装各种依赖，生成项目文件了，让我们打开文件夹看一下文件结构。

# 文件结构 #

![文件结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 6]  
Vue CLI帮我们自动生成了如图所示的文件结构，下面简要介绍一下这个生成的结构。

*  `node_modules`：存放依赖包的文件夹
 *  `public`：公共资源文件夹，这里的`favicon.icon`可以被替换成你自己的网站icon
 *  `src`：资源目录
    
     *  `assets`：静态文件目录
     *  `components`：Vue组件目录，这里应当存放那些可被复用的组件，里面都是`.vue`文件
     *  `views`：页面目录，这里是单个页面文件存放的地方，它们本质上也是组件，里面也都是`.vue`文件
     *  `App.vue`：应用的主组件，可以理解为所有的页面都是这个组件的子组件
     *  `main.js`：应用的入口文件，这里是Vue实例被初始化和插件被引入的地方
     *  `router.js`：Vue Router文件
     *  `store.js`：Vuex文件，实际开发过程中也可以将`state`，`mutations`和`actions`分开变成三个`.js`文件，再建一个`vuex.js`文件来引入上述三个文件，然后用一个名为`store`的文件夹包含这四个文件，在`main.js`里引入`vuex.js`，这样能更好地组织Vuex中的内容。
 *  `tests`：单元测试文件夹
    
     *  `unit`：测试样例
 *  `.browserslinstrc`：浏览器支持配置文件
 *  `.editorconfig`：编辑器配置文件
 *  `.eslintrc.js`：ESLint配置文件
 *  `babel.config.js`：Babel配置文件
 *  `postcss.config.js`：PostCSS配置文件
 *  `.gitignore`：git忽略文件列表
 *  `package.json`：项目说明文件以及依赖包列表
 *  `package-lock.json`：依赖版本锁定文件
 *  `README.md`：Readme文件

# 脚本 #

Vue CLI 已经为我们准备好了开发时需要的几个脚本，可以在`package.json`的`"scripts"`字段中看到，下面介绍一下这几个脚本。

## 运行开发服务器 ##

npm run serve

这个指令会开启本地调试，默认的端口是`8080`，Vue CLI用了webpack-dev-server，所以开发服务器有热更新功能，让我们执行这个命令，并访问`localhost:8080`，可以看到Vue项目的初始页面。

![初始页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 7]

这个页面也是一个Vue单页应用的例子，其中最上面的导航栏是在`App.vue`部分中的，也就是说在所有页面都会出现的，其余部分都是`views/Home.vue`文件中的内容，也就是一个页面文件。其中只有这个Logo和下面的一行大字是在`Home.vue`文件中写死的，下方部分来自`components/HelloWorld.vue`，也就是说这部分是一个可复用的组件。这个页面向我们介绍了`views`中文件和`components`中文件的关系，我们可以得到这样一个关系，`App.vue`是`views`中组件的父组件，同时`views`中的组件是`components`组件的父组件。

## 构建到生产环境 ##

npm run build

这个命令会产生一个用于生产环境的`dist`文件，dist是distribution的简写，也就是发布的意思，官方文档中对在不同的服务商环境中部署有详细的介绍，可以移步[官方文档][Link 2]来查看部署方法。

## 代码检查 ##

npm run lint

## 单元测试 ##

npm run test:unit

# 参考 #

1.  [Vue CLI 3][]

欢迎大家访问我的GitHub主页[https://github.com/DaKoala][https_github.com_DaKoala]与我交流!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70]: /images/20220330/b827323c13ac4fbb97a3936eeaa2c89d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 1]: /images/20220330/1e65ee366f7e4a13b456261b8d708103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 2]: /images/20220330/9c78436461544a79848eb0ae3524df63.png
[Link 1]: https://router.vuejs.org/zh/guide/essentials/history-mode.html
[CSS]: /images/20220330/47564eaabf484361821c83bdf222c0f1.png
[ESLint]: /images/20220330/bd0db306986745f4b220eca2b0c56194.png
[Airbnb]: https://github.com/airbnb/javascript
[Standard]: https://standardjs.com/rules.html
[Prettier]: https://prettier.io/docs/en/index.html
[Lint]: /images/20220330/ea28d850e2f04e95b388b5ea7cb1fa3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 3]: /images/20220330/6551c72594c64468b070351289da1356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 4]: /images/20220330/fce847643936432882703308dbcac6b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 5]: /images/20220330/aecf7fd1db1549779a4e7aade459d4ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 6]: /images/20220330/f4bb6f2bdf8748379c2e9bb84734a454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 7]: /images/20220330/65fadfb9c7824dd4b5a1bcb585334266.png
[Link 2]: https://cli.vuejs.org/zh/guide/deployment.html
[Vue CLI 3]: https://cli.vuejs.org/zh/
[https_github.com_DaKoala]: https://github.com/DaKoala