Vue初体验 | 升级vue-cli到3.0版本以上

文 | 我是孙小白

使用vue-cli2.9版本开发已经有一段时间了， 今天决定进行下升级- @vue/cli3.x版本。

关于旧版本：
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node版本要求：
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

步骤：

• 卸载之前的vue-cli版本：npm uninstall vue-cli -g
  如果电脑有密码，需要权限认证： sudo npm uninstall vue-cli -g

• 安装新版本包：npm install -g @vue/cli 或者 yarn global add @vue/cli
  如果有权限问题， 需要加上sudo：sudo npm install -g @vue/cli

• 检测版本是否正确：vue --version

• 创建新项目：vue create vue-test
  在创建的过程中，你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

到此新项目就创建成功了,看一下目录结构：

配置：

全局 CLI 配置
有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫.vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。
你也可以使用vue config 命令来审查或修改全局的 CLI 配置.

我们需要一个vue.config.js配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

• 配置代理
  如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
  devServer.proxy 可以是一个指向开发环境 API 服务器的字符串，可以告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

以上，关于配置部分参考官方文档：https://cli.vuejs.org/zh/config/#全局-cli-配置。