Vue CLI 3 開箱

建立時間: 2018-08-16 10:49:10
更新時間: 2019-04-17 23:00:52

 

開始之前

可以先看一下Vue CLI 3與上一版的的差異

上一版的Vue CLI其實功能很單純

就是一個建vue webpack project的工具

只有clone樣板然後透過CLI做一些選項

 

Vue CLI 3比較不同的功能

  • 原本一堆的webpack設定(build資料夾)全部拿掉
  • .babelrc預設拿掉, 透過專案根目錄的babel.config.js來做babel設定
  • 提供GUI功能方便操作管理
  • 除了能打包整個web, 也能打包成JS Library或Web Component, 甚至能安裝electron-builder plugin來打包最潮的Electron App
  • 打包時可以直接打出PWA設定檔
  • 可以使用page選項一次設定多個進入點
  • 提供GitHook可以在git的一些操作的時間點做其他事情
  • 提供多樣性的佈署解決方案
    • GithubPage
    • GitLabPage
    • AWS S3
    • Firebase
    • Heroku

 

安裝

Node.js必須是8.9以上(建議8.11.0以上)

 

如果系統已經有安裝過上一版的Vue CLI(vue-cli)

必須先將舊版的Vue CLI移除yarn global remove vue-cli

接著安裝Vue CLI 3

yarn global add @vue/cli

 

舊版的vue cli還要使用怎麼辦?

官方已經有提供解法

雖然舊版的Vue CLI已經被移除

但如果還要用也是ok的

官方有將舊版的CLI做成Vue CLI 3的套件

yarn global add @vue/cli-init

 

安裝好之後舊版一樣能正常使用

vue init webpack my-project

 

專案結構

 

Vue CLI 3產出的專案結構跟上一版也些差異

原本的static資料夾改成public

而src下的也多一個views資料夾

這個views裡面只放每個頁面指向的那個主要vue

而其他不是views的vue就放在components資料夾中

 

基本的使用

建立專案

使用vue create建立專案

接著vue就會開始問一堆選項

只要一一選擇專案就會建出來

vue create hello-world

 

啟動Dev Server

原本的Dev Server啟動npm script由dev改成serve

yarn serve

 

Build(web)

yarn build

 

Build(web component)

target參數要設為wc

name參數則是一定要使用-

打包完之後在輸出資料夾會產一個demo.html可以開起來demo看打包的結果

# 打包成單一Web Component
yarn build --target wc --name foo-bar src/main.js

# 每個元件都單獨打包成Web Component
yarn build --target wc --name foo-bar 'src/components/*.vue'

 

檢查webpack設定檔

這個新功能我個人覺得非常有用

在上一版本的Vue CLI打出來的專案

會將webpack設定檔拆成好幾個(base/dev/prod/test)然後最後又merge在一起

雖然比較好管理

但是有時候要改設定時會搞不清楚最後merge後的結果到底是什麼

有這個inspect功能把最後的設定倒出來看比較清楚

vue inspect

 

使用GUI圖形化界面

Vue CLI 3提供一個很精緻的GUI

可以使用

vue ui

 

雖然對於RD來說還是使用command line比較有感覺而且方便自動化

但是GUI在某些情境還是不錯用的

像是可以直接查看或搜尋npm套件

 

 

另外前面講的檢查webpack設定的功能(inspect)也能夠在這裡使用

 

或是查看整個webpack打包的分析結果

 

 

 

Plugin

這邊的plugin指的是Vue CLI 3打出來專案的專用套件

我們可以使用vue add [plugin-name]的方式安裝plugin

以下面安裝vue/eslint這個plugin為例

vue add @vue/eslint

 

安裝好後我們可以從git diff可以看到

Vue CLI除了會安裝node module之外

還會產生那個檔案相應的測試、設定檔

甚至幫你加好那個plugin的所有設定

 

所以官方建議在使用vue add安裝plugin之前先將git commit一次

 

自行開發plugin

另外官方也有訂出一套plugin開發的標準

可以依照這套標準建立自己的plugin

除了建立Vue CLI plugin之外

還能建立自己的GUI的plugin

 

Presets

當我們在使用Vue CLI的時候常常會遇到需要選擇問題

如果每次的設定都差不多

可以透過preset的方式讓Vue CLI在遇到選項時自動選擇

而預設的preset會參考~/.vuerc這個檔案

除了使用~/.vuerc之外

preset檔案也能使用下面幾種方式讀取

 

Remote Repo

# use preset from GitHub repo
vue create --preset username/repo my-project

 

Local Filesystem

# ./my-preset should be a directory containing preset.json
vue create --preset ./my-preset my-project

# or directly use a json file in cwd:
vue create --preset my-preset.json

 

官方文件

 

CLI Service

在Vue CLI的project中

我們可以透過npm script來使用Vue CLI Service

像是預設的servebuildinspect

也可以透過npx來操作Vue CLI Service

npx vue-cli-service serve

 

Git Hook

可以透過在package.json中設定Git Hook

在特定的hook做一些事情

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

 

官方文件

 

修改Webpack設定

如果不想使用預設的webpack設定

可以在專案根目錄加入一個vue.config.js來修改webpack設定

至於這裡的設定真的太多了

這邊只挑幾個重點講

其他的設定可以看官方文件

 

baseUrl

String

預設為'/'

設定web的base url

如果要用Github Page就會需要修改這個設定

其實就是上一版的assetsPublicPath設定

另外也可以依照NODE_ENV來決定目前是develop或是production模式來決定baseUrl

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

 

outputDir

String

設定輸出的資料夾名稱

預設為dist

目前想的到的情境大概就是Github Page

因為Github Page有一個選項是可以讀取docs資料夾內的檔案來產web

 

assetsDir

String

設定assets

 

pages

官方文件[page]

Object

如果我們希望build的時候能打包出多個page

原本我們是要修改webpack的entry point

不過vue cli可以直接從page這個設定來處理

像是官方的範例這樣

module.exports = {
  pages: {
    index: {
      // 設定index page的entry point
      entry: 'src/index/main.js',
      // html來源
      template: 'public/index.html',
      // 輸出的html名稱
      filename: 'index.html',
      // 當我們使用title選項時, html的title tag要這樣設定 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // chunk設定
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 簡易設定entry point, 以這個範例來說, 來源將參考subpage.html, 輸出檔案為subpage.html
    subpage: 'src/subpage/main.js'
  }
}

 

configureWebpack

Object | Function

可以使用這個選項來擴充預設的webpack設定

如果使用Object將會直接使用webpack merge功能合併設定

如果是希望條件式的依照NODE_ENV來設定就要使用Function

並使用config參數來做設定

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

請參考Working with Webpack > Simple Configuration

 

chainWebpack

Function

如果需要做更細的webpack設定

像是對plugin, loader等設定做修改

可以使用此選項

請參考Working with Webpack > Chaining

 

瀏覽器相容性處理

BrowserList

設定瀏覽器支援度

autoprefixer@babel/preset-env自動加prefix或polyfill

除了可以直接在package.json中直接設定

也可以另外獨立出一個.browserslistrc來設定

 

Polyfills

如果需要將code轉成ES5

可以透過@vue/babel-preset-app的polyfill選項

在babel.config.js中設定polyfill

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

 

在打包Library或Web Component時使用polyfill

必須將@vue/babel-preset-appuseBuiltIns選項設定為false

這樣才不會載入不必要的polyfill

 

官方文件

 

Build Targets

Vue CLI的預設Build Targets有三種

  • app: 一般Web
  • lib: entry point會是js(app的entry point是html), 例如vue plugin, 如果要使用UMD類型可以將configureWebpack.config.libraryExport設定成default
  • wc/wc-async: Web Component

 

官方文件