Getting Started with Vue-CLI

Vue:2.6.11

Vue-CLI:4.4.4

在我們使用 Vue.js 開發 Single Page Application(SPA)時,在前置作業上要做不少的設定,比如套件的安裝、格式的設定等等,頗為麻煩。

因此就有了 Vue CLI 這個工具的誕生,只要透過一些簡易的選項,Vue CLI 可以快速的幫助我們產生一個 SPA 專案,可以節省設定的時間。

Installation

首先,要先安裝 vue-cli 套件才可以使用 vue 的指令。

; npm
npm install -g @vue/cli

; yarn
yarn global add @vue/cli

安裝成功以後,可以試試看是否有 vue 的指令可以使用。

vue --version

Create Project

可以透過以下指令建立專案:

vue create <project-name>

下完指令之後,系統會開始詢問相關的設定。

Initial Configuration

Please pick a preset

一開始會先詢問你要使用哪種模組,選擇預設的話只會安裝 babeleslint

通常建議選擇自訂,按照自己專案的需要做調整。

Vue CLI preset

Check the features needed for your project

此選項是用來選擇專案需要用到的套件

一樣按照你的需求選擇需要的工具,選擇完成以後,接下來會再詢問這些套件更細節的設定。

Vue CLI module

Use class-style component syntax?

TypeScript 的設定,決定是否要用 class-style 的語法。

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?

決定是否要使用 Babel 做轉譯。

Use history mode for router? (Requires proper server setup for index fallback in production)

Vue Router 的設定,選擇是否要使用 history mode,使用 history mode 的話,URL 會像一般常見的 https://localhost/id/3,這種模式會透過 history.pushState 的特性達成頁面跳轉時無需重 load 頁面的功能。

另一種則是 hash mode,URL 會像 https://localhost#id

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)

選擇 CSS 的預處理器。

CSS pre-processor

Pick a linter / formatter config

選擇 ESLint 的規範設定。

ESLint formatter

Pick additional lint features

ESLint 的設定,選擇程式碼檢查的時機。

ESLint additional lint features

Pick a unit testing solution

選擇 unit test 的套件。

unit testing solution

Where do you prefer placing config for Babel, ESLint, etc.

選擇要將各套件的 config 拆開,還是都寫在 package.json 裡。

config placing

Save this as a preset for future projects

這個選項是詢問要不要把上述這些設定當成模組,如果選擇要的話,可以再為這個模組命名,下一次在一開始選模組那個步驟就會多出新模組的選項。

future projects

Run your app

建立完成以後,進入你的專案根目錄,執行以下指令就可以執行你的專案了。

npm run serve

Notice: 該指令只是建立一支 process 監聽 http request,只適合用來測試;正式環境建議還是用 npm run build 產生編譯過的檔案。

Remove Preset

上面有提到可以建立設定模組,讓之後也可以透過自訂模組產生專案。

在管理方面,也可以透過 vue 指令來進行刪除。

; 顯示目前自訂的模組設定
vue config

; 刪除自訂模組
vue config --delete presets.YOUR_PRESET_NAME
Categories: VueVue-CLI