安装
如果想要使用vue cli 3.0 首先需要全局安装,前提要求Node.js版本必须是8.0及以上
npm install -g @vue/cli
vue cli 3.0默认会覆盖vue cli 2.0 ,如果想要在使用3.0版本的时候同时使用2.0版本,那么执行以下命令
npm install -g @vue/cli-init
该命令是安装一个桥接工具,2.0版本的命令依然会被保留
vue init webpack test-2
创建
vue create hello-cli3
也可以通过命令打开一个图形化界面进行配置
vue ui
配置
在3.0版本中会让我们自行选择需要的配置
第一个选项default
是生成一个默认的简易配置的模板,可以类比为之前 2.0 版本中的webpack-simple
模板,如果正式开发的话,建议选择Manually select features
自己进行配置
在选择Manually select features
后,会让我们选择模板中进行哪些配置,新添加了添加对TS和PWA的支持,这里可以根据项目情况自己选择需要使用那些,空格选中/取消,A键全选
接下来会让我们选择要使用的预编译工具,选择一个自己常用的
然后会让我们选择代码格式化检测工具
这里提供两个选项,保存的时候检测还是在commit
和fix
的时候检测,可以根据项目需要进行选择
这里如果不选择前面的 Linter/ Formatter
就不会出现该选项,也可以在package中删除掉相关代码
"eslintConfig": { ... "extends": [ "plugin:vue/essential", "@vue/prettier" //删除掉这里 ], ... },
然后会询问我们要将babel 等这些文件放置到 一个独立文件 / package.json,推荐放置到一个独立文件
然后会让我们选择是否保存刚才的配置,第一项表示保存,保存之后下次再创建时就有我们之前的配置了,不需要再配置一遍,然后可以为该配置添加一个描述
在我们配置了这两项之后,再次使用vue create xxx
会出现我们之前的配置让我们可以直接复用之前的配置
如果后期我们想要删除之前配置的模板,可以找到用户下的.vuerc
的json文件,找到presets
项,删除掉对应模板名称及配置即可,也可以修改对应配置来更改模板
启动
在VUE CLI 3 中默认的下载使用yarn
,所以命令使用yarn
yarn serve
打包
yarn build
配置vue.config.js
在vue cli 3.0中取消了config
配置文件,如果我们想要额外配置,需要在根目录新建一个vue.config.js
文件,在该文件中进行配置
配置别名
const path=require("path");function resolve(dir){ return path.join(__dirname,dir)}module.exports={ chainWebpack:config=>{ config.resolve.alias .set("views",resolve("src/views")) }}
配置代理
依然是采用 做的跨域处理
module.export={ devServer:{ host:'localhost', port:8080, proxy: { '/api': { target: "https://api.douban.com/", changeOrigin: true, pathRewrite: { '^/api': '' } } }, }}
处理首页白屏
在 3.0 中依然存在打包后首页白屏的问题,解决方案就是配置baseUrl
module.exports = { baseUrl:"./"}
更加详细的关于vue.config.js
文件的配置,可以参考