第 11 屆 iT 邦幫忙鐵人賽

Modern Web

技術在走,Vue.js 要有系列 第 2

|D2| Vue CLI3 安裝與建立 vue 專案


我們透過 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 中可以使用 historyhash 兩種模式

  • 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 

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 的專案架構

|D1| 總是要開場白一下
|D3| 從原始碼看 Vue 渲染機制 (1) - new Vue 做了什麼
技術在走,Vue.js 要有30