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:"./"
}