共计 1516 个字符，预计需要花费 4 分钟才能阅读完成。
安装
如果想要使用 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”))
}
}
配置代理
依然是采用 http-proxy-middleware 做的跨域处理
module.export={
devServer:{
host:’localhost’,
port:8080,
proxy: {
‘/api’: {
target: “https://api.douban.com/”,
changeOrigin: true,
pathRewrite: {
‘^/api’: ”
}
}
},
}
}
处理首页白屏
在 3.0 中依然存在打包后首页白屏的问题，解决方案就是配置 baseUrl
module.exports = {
baseUrl:”./”
}
