项目接下来可能需要 vue 的技术栈。所以先学一学 Vue 玩玩。
学习资料自然是详细的官方文档了。

前言

有了 React 的经验，我直接使用 vue-cli 来安装。
vue-cli 也有相对应的文档，比起 create-react-app 的文档来说，简直爽死。 vue-cli 类似于 create-react-app。

1.0 cli-service

当使用 vue-cli 创建一个项目的时候，会自动安装 cli-service。
其构建于 webpack 和 webpack-dev-server 之上。那么其作用也不言而喻了。
它包含了：

加载其他 cli 插件的核心服务。
一个适用于大部分应用的 webpack 配置。
vue-cli-service 命令，提供 serve，build，inspect 命令。（类似于 react-scripts）

1.1 cli 插件

cli 插件可以给项目提供一些附加功能。类似于 babel 编译，eslint，单元测试等等。
cli 插件的命名是有规范的，根据前缀不同，属性也不同：

以 @vue/cli-plugin- 开头的是内建插件
以 vue-cli-plugin- 开头的是社区插件当在项目文件夹里直接运行 vue-cli-service 命令时，就会自动加载 package.json 里的所有 cli 插件。

1.2 创建新项目

命令行创建

vue create <projectName>

vue 居然提供了 gui 界面来创建项目。

vue ui

1.3 插件和 preset

vue-cli 使用的是基于插件的架构。使用插件来完成各种功能，例如修改 webpack 配置等

1.3.1 安装新插件

vue add <pluginName>

e.g.
vue add eslint

实际上上述命令相当于 vue add cli-plugin-eslint

1.3.2 preset

如果在 vue create 的过程中，如果不是使用 vue 自带的 preset，而是自定义配置。那么在生成项目后，会自动生成一个 .vuerc 文件，里面储存了配置信息。
可以编辑这个文件，来对 preset 进行调整，保存。

1.4 cli-service

1.4.1 vue-cli-service 命令

如前所述，这个命令类似于 react-scripts。
使用这个命令，可以在 npm script 中调用。也可以在终端中使用 ./node_modules/.bin/vue-cli-service 来调用，或者 npx 来调用。

默认 preset 提供了以下 3 个命令：

使用 npm run 来运行。

serve: 开发服务器，基于 webpack-dev-server，并提供了热重载。
build：顾名思义，打包代码。

还可以通过 npx vue-cli-service --help 获取所有可行的命令。

1.4.2 无需 eject

vue-cli 原生提供了修改配置的功能，比如修改 webpack 等。比起 create-react-app 好多了。

1.5 兼容性

参考这个吧，不想看。

1.5.1 现代模式

不过还是有可以说的，比如说现代模式，在 build 的时候加上这个参数：

npm run build --modern

会打包两个应用。一个是现代版本的包，一个是会对旧版本转译的应用。
因为转译后的应用，往往比较缓慢。而 es6 原生的比较快。如果确定用户都会使用 es6 特性，那就使用现代版本。

1.6 静态资源

这文档讲的真详细，不像 create-react-app。静态资源怎们弄还要自己去查。
不过和 react 的使用方法是一样的，两种方式：

从 js，template，css 中导入，会被 webpack 处理。
放在 public 目录里。

webpack 处理的好处：

每次会新生成哈希值，不会被浏览器缓存。
打包本身的好处，减少请求次数。
文件丢失会在编译的时候出错，而不是浏览器端才报错。

不过，当有许多个资源，需要动态管理的时候，推荐使用 public。

1.7 css 相关

vue-cli 项目原生支持 post-css 等预处理器。具体要用的时候可以看这里。

1.8 webpack 相关

自带的 webpack 已经够好用了，非要改的话。参考这个。

1.9 构建目标

到底是构建一个应用，还是构建一个库。都可以在 build 的时候选择。

1.10 部署

打包成 dist 文件夹后怎么部署，详见。居然这都写了，真的感动。react 相比之下真的不行。

Vue 学习笔记（一）--vue-cli

前言