文 | 我是孙小白
使用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-配置。