vue-cli 3.0 使用
安裝
如果想要使用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:"./"
}