Vue CLI3 安裝與設定

發表於 | 更新於: | 分類於

Vue CLI3 可以快速建立以 Webpack 為基礎的 Vue 單頁式應用開發環境，並且可以透過手動新增 vue.config.js 來變更 Vue CLI3 環境的預設設定。

安裝

1
npm install -g @vue/cli

查看版本

1
vue --version

創建專案

1
vue create :[專案資料夾名稱]

細節設定

選擇手動設定或預設設定

1
2
3
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

手動選取功能

這些功能是開發者較常用的，若不在這邊做設定，也可以之後透過 npm 來安裝。

1
2
3
4
5
6
7
8
9
10
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Vue Router 模式設定

Vue Router 的 mode， 可選擇 history 或是 hash (預設模式)，hash 預設模式會在 URL 加上 # 符號，由前端來執行虛擬路由。

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

若之後需要更改可以到 Vue CLI3 生成的 router.js 內修改。

1
2
3
4
5
6
export default new Router({
  mode: 'history',
  routes: [
    //..略
  ]
})

CSS 預處理器

若是 SCSS 使用者，可以選擇 Sass/SCSS (with node-sass)。

1
2
3
4
5
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass)
  Less
  Stylus

ESLint 協助讓你寫的程式符合規範的輔助工具，區分嚴謹程度

1
2
3
4
5
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
❯ ESLint + Standard config
  ESLint + Prettier

程式碼檢查時機

1
2
3
4
5
6
7
8
9
10
11
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save                            # 存檔時
 ◯ Lint and fix on commit (requires Git)  # 提交更新時

# 在哪為特性進行配置
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

# 是否將上述配置儲存到 preset 的 default (就是一開始那)
? Save this as a preset for future projects? (y/N) N

進入專案資料夾

1
cd :[專案資料夾名稱]

開啟服務

1
npm run serve

發佈

1
npm run build

vue.config.js 配置

vue.config.js 是一個可選的配置檔案 (必須自行新增)，如果專案項目的根目錄中 (和 package.json 同層目錄)，它會自動被 @vue/cli-service 加載，並改變 Vue CLI 的預設行為。

參考官方文件