Vue CLI 3 学习笔记

Vue CLI 3这个版本现在已经趋于稳定，这个版本集成了更多丰富的功能，更少的配置甚至零配置（有默认配置），还可通过附带的图形用户界面创建、开发和管理项。个人感觉图形界面没有指令来的方便，用指令创建项目，只需运行 vue create my-project【项目名称】 命令，接下来按照提示进行选择即可。在这篇笔记，主要将 如何创建的项目，以及项目集成的插件和相关的配置，简要罗列出来，如果想深入了解，请移步官方文档：Vue CLI 3

安装成功后，运行以下命令来创建一个新项目：

vue create my-project

cli-new-project.png

选择 Manually select features , 根据项目需要，选手动设置，选择需要的选项：

standard-vue-project.png

选择了需要的集成的功能后，根据提示，选择相应的插件，产生的配置文件我希望放在一个地方方便进行管理

config-in-package.png

自动安装依赖包完成后，可以通过一下指令启动服务并打开浏览器（--open）：

yarn serve --open

//打包
yarn build
//运行测试
yarn test:unit

serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

start-project.jpg

上图右侧是浏览器打开项目包含路由切换的简单示例页面。左侧是项目的目录结构，以及package.json文件的一些配置项：ESlint，Jest等。根据项目的需要，自行配置规则，基于Vue CLI 3 快速创建一个项目，并已经能成功运行了。接下来可以愉快的写代码了~~

---

在这里延伸一些配置相关的内容。

1. vue.config.js
   在项目根目录下，创建 vue.config.js文件（这个配置文件是可选的，若没有相关的必要，可以忽略），一些打包相关的配置，开发服务器的设置，都在这个文件中配置，如：devServer字段，就是用来配置开发服务器，可设置代理，域名、端口等。
   更多配置项可参考vue.config.js官方配置。

2. ESLint
   这个项目启用了ESLint，在pacakge.json 文件中， eslintConfig 字段来配置相关规则。
   期望通过ESLint 结合 Prettier，能在保存和提交时格式化代码，统一代码风格。在团队协作的项目代码也能有较好统一协调性。找到相关的配置资料：使用ESLint ＆ Prettier美化Vue代码。按照这个教程即可配置。

3. 单元测试
   之前项目紧张，都没有写过单元测试，在这个项目期望可以开始做单元测试。这里选了Jest，因为网上比价推荐，相对Mocha，Jest更简洁。至于怎么个简洁法。后边再慢慢了解，并尝试如何写单元测试。如果条件允许的话（项目时间不是太紧张），希望团队也开始重慢慢视单元测试。