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

更加詳細的關於vue.config.js文件的配置，能夠參考這篇文章