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 -gyarn global remove vue-cli 卸载它。

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

步骤:

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

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

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

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

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

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

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

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

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

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

配置:

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

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

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

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

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

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

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

    原文作者:我是孙小白
    原文地址: https://www.jianshu.com/p/f34c15625283
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞