相信不管有沒有用過 Vue 開發的朋友,應該都曾聽過 Vue CLI 這個用來快速建置 Vue 專案的工具。 Vue CLI 這個工具套件現在即將推出 3.0 的版本,當然也有了不少變革與進展,這篇文章就簡單來介紹 Vue-CLI v3 提供了什麼新功能吧。

Vue-CLI 官網: https://cli.vuejs.org

安裝

Vue CLI v3 要求 Node.js V8 或更高版本(建議版本 8.10.0+ )。

可以使用 npm 或是 yarn 來進行安裝。

Copy Code

$ npm install -g @vue/cli

Copy Code

$ yarn global add @vue/cli

安裝後可以透過 vue -V 指令來確認 Vue-CLI 的版本:

Copy Code

$ vue -V
3.0.0-rc.3

註: 本文撰寫時最新版本為 3.0.0-rc.3

建置新的 Vue 專案

過去建立新專案,是透過 vue init 再加上樣板名稱,但自從 CLI v3 後改直接執行 vue create 指令建立,如:

Copy Code

vue create hello-world

首先可以選擇最基本的 Babel + ESLint 預設選項:

或者也可以改選 "Manually select features" 來設定你需要安裝的部分。

接著會詢問你要使用 Yarn 或 NPM 來管理/安裝套件:

然後是一連串的安裝過程,完成時會跟過去一樣,提示你相關的執行指令:

Copy Code

$ cd hello-world
$ yarn serve

馬上來執行看看

vue-cli 會建立一個 http 服務,你可以從 localhost 或是遠端連進。 然後打開瀏覽器:

跟過去不太一樣的是,在 CLI v3 後,啟動測試環境的指令改為 yarn serve 而不再是過去的 yarn dev 了。 當然背後仍是透過 npm script 來執行,我們在 package.json 可以看到實際上是執行 vue-cli-service 這個服務。


同樣地,如果我們要打包發佈時,執行 yarn build , Vue CLI 就會幫我們把相關的程式碼打包至 dist 目錄了。 像這樣:

vue-cli-service

vue-cli-service serve 提供了下面幾個選項來幫助我們啟動測試的 server:

Copy Code

Usage: vue-cli-service serve [options]

Options:

  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

如果對 vue-cli-service 有興趣的朋友可以詳閱官方文件: https://cli.vuejs.org/guide/cli-service.html

加入 CSS Pre-Processors

CLI v3 後預設不安裝任何的 CSS Pre-Processors (預處理器),不過我們還是可以自行挑選喜歡的來使用。

Copy Code

# Sass
npm install -D sass-loader node-sass
# 或 (yarn)
yarn add sass-loader node-sass

# Less
npm install -D less-loader less
# 或 (yarn)
yarn add less-loader less

# Stylus
npm install -D stylus-loader stylus
# 或 (yarn)
yarn add stylus-loader stylus

安裝後即可在對應的 .vue 檔案中指定 lang 屬性即可,這裡以 scss 為例:

Copy Code

<style lang="scss">
$color = red;
</style>

vue.config.js 設定

專案建置後,若你仔細觀察就會發現 Vue CLI v3 將原本 webpack 的設定檔案完全隱藏,在目錄中完全找不到 webpack 的 config 檔了:

取而代之的是,若我們需要自行調整 webpack 的設定時,需另外在專案的根目錄建立 vue.config.js 來設定這些細節 (當然也可以不用,那就是採預設值) :

Copy Code

// vue.config.js
module.exports = {
  baseUrl: '/',
  outputDir: 'dist',
  lintOnSave: true,
  compiler: false,
  chainWebpack: () => {},
  configureWebpack: () => {},
  devServer: {
    // 略...
  },
  // ......
};

透過 vue ui 來建置 vue 專案

Vue CLI v3 提供的最大變革,是新增了圖形化介面來方便我們管理與建置專案。

你可以透過執行 vue ui 這個指令,此時會在 localhost 建立一個 http 服務,並且透過瀏覽器開啟管理介面:

有興趣的朋友可以自行試用。

執行舊版的 Vue CLI

當你安裝 CLIv3 後,預設會覆蓋掉過去舊版的 Vue CLI。 若你還需要過去的 CLI 樣板功能,可以另外安裝 @vue/cli-init 來執行 CLI 2.x 的版本:

Copy Code

$ npm install -g @vue/cli-init

# vue init now works exactly the same as [email protected]
$ vue init webpack my-project

以上就是新版 Vue-CLI v3 的簡單介紹,讓我們期待未來正式發佈的版本! :)