前言

我們透過 webpack 來打包前端各種類型資源，webpack 讀取檔案都依靠 loader 然後轉換成 JS模組，例如：

• babel-loader: webpack 使用的 babel 編譯器
• css-loader: webpack 用來處理 css 檔案
• vue-loader: webpack 用來 Vue Component Spec

自己一步步建立 webpack config 是很有成就感，不過若想加速開發，vue-cil3 提供了 create 指令，可以快速建立好專案環境，有基本的資料夾架構跟 webpack config 。

安裝 vue-cil3

• 安裝 Vue CLI 需要 Node.js v8.9 以上的版本
• vue create 指令只有 Vue CLI 3 可以使用
• 移除 3 以前的版本 npm uninstall -g vue-cli

安裝

npm install -g @vue/cli

建立 Vue.js 專案

建新專案

vue create <project name>

config 設定

stap 1

default 沒有 router 跟 vuex，對之後的練習不方便，手動選擇需要的 feature

Vue CLI v3.3.0

? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
❯ Manually select features #

stap 2

開始選擇要的 feature

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel #
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router #
❯◉ Vuex #
❯◉ CSS Pre-processors #
❯◉ Linter / Formatter #
 ◯ Unit Testing
 ◯ E2E Testing

stap 3

在 vue router 中可以使用 history 或 hash 兩種模式

• default 是 hash 模式
• hash mode
  • url 帶有 # 符號
  • 只有在 # 前的 url 包含在 http 請求中，如：
    
• history mode：
  • url 完整包含在 http 請求中，如：
    

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

stap 4

我習慣用 SCSS

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
❯ Sass/SCSS 
  Less 
  Stylus 

stap 5

用 ESLint 來檢查程式碼品質，Prettier 統一 codeing style

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier 

stap 6

選擇檢查程式碼的時機

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
 ◯ Lint on save #存檔時檢查
❯◉ Lint and fix on commit #提交時檢查

stap 7

把 Babel, PostCSS, ESLint 等等的設定檔放哪

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files #設定檔各自獨立
  In package.json #官方默認，設定檔都寫在 package.json

stap 8

是否將 stap 2 ～ stap 7 的設定存成 default

? Save this as a preset for future projects? (y/N) n

終於完成步驟了！
下面就是用 vue-cil3 create 的專案架構