[Vue] 跟著 Vue 闖蕩前端世界 - 02 使用 Vue-cli 建構專案 | 搞搞就懂 - 點部落

2017-03-01

[Vue] 跟著 Vue 闖蕩前端世界 - 02 使用 Vue-cli 建構專案

25152
0
Vue
2017-03-02

透過 Vue-cli 建構專案

略過相關套件(webpack, ESLint, babel)繁雜的設定過程

前言

在進行前端開發時，往往會搭配一些建置套件 (ex. Gulp, Webpack) 來取代重複性的人工作業，而 Vue-cli 是由 Vue 官方提供的專案樣板工具，可以快速透過指令建立出一個立即可用的開發環境，以下說明。

安裝 Vue-cli 套件

官方建議在 Node.js (>=4.x, 6.x preferred) 及 npm version 3+ 環境使用，可透過 npm 全域安裝 vue-cli 套件；安裝完畢後可使用 $ vue -V 查看版本，目前最新版本為 v2.8.1，相依的 vue 版本為 v2.1.1。

$ npm install -g vue-cli

建立 Vue 專案

透過 vue-cli 以下列語法建立 vue 專案結構

$ vue init <樣板名稱> <專案名稱>

可使用 $ vue list 查看官方預設樣板清單

直接使用 webpack 模板來建立 vue-demo 專案

$ vue init webpack vue-demo

建立過程可依需求調整相關選項：

建議安裝 vue-router (需要安裝作為 SPA 路由)
建議安裝 ESLint (檢查 coding style 套件，保持專案風格一致)
Karma, Mocha, Nightwatch (測試相關可依需求使用)

依照指示切換到專案目錄後，安裝所有專案相依套件，最後執行開發伺服器掛載專案程式

$ cd vue-demo
$ npm install
$ npm run dev

看到歡迎訊息表示上述作業都完成，接著就可以進行開發了

專案檔案結構簡介

webpack

webpack 是當前最熱門的前端資源模組化管理及打包工具，任何型態資源(CommonJs Module, AMD Module, ES6 Module, CSS ...) 都可以視為模組，透過 webpack 依賴模組之相依姓和規則打包成前端資源；目前已演進到 v2.2 版本，設定上與 v1.X 有些微差異，各項設定說明如下。目前最新版本為 v2.2。

入口起點 (Entry Point)

module.exports = {
    // ...
    entry: {
        app: './src/main.js'
    }
    // ...
}

可以透過入口檔案 import 所需相依模組，可允許多組使用。

輸出 (Output)

module.exports = {
    // ...
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ?
            config.build.assetsPublicPath :
            config.dev.assetsPublicPath
    }
    // ...
}

打包後輸出檔案位置：

path 表示打包完成的檔案放置位置 (預設為 dist 資料夾)
fileanme 中的 [name] 會依據 entry 屬性名稱變動；可以使用 [chunkhash] 根據內容 hash 作為檔名，隨著內容變動而變動，避免過板時舊檔被快取而產生問題
publicPath 表示設定所有 assets 的 base path，多用於取得 CDN 相關資源情境

解析模組 (Resolve)

function resolve (dir) {
  // __dirname 表示被執行js所在資料夾位置
  // .. 表示上一層  
  return path.join(__dirname, '..', dir)
}

module.exports = {
    // ...
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        modules: [
            resolve('src'),
            resolve('node_modules')
        ],
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'src': resolve('src'),
            'assets': resolve('src/assets'),
            'components': resolve('src/components')
        }
    }
    // ...
}

文件路徑指向相關設定，讓 import module 更加精簡：

extensions : 自動解析副檔名，設定後可用 require('boo') 表示 require('boo.vue')
modules : 模組搜索路徑，設定後可用 require('boo.js') 取代相對路徑 require('../src/boo.js')
alias : 建立別名，設定後可用 require('components/boo.js') 取代相對路徑 require('../../components/boo.js')

加載器 (Loader)

function resolve(dir) {
    // __dirname 表示被執行js所在資料夾位置
    // .. 表示上一層  
    return path.join(__dirname, '..', dir)
}

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: "pre",  // 預前處理
                include: [resolve('src'), resolve('test')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            }
            // ...
        ]
    }
    // ...
}

在 rules 中設置多組 Loader 來處理對應檔案的轉換作業：

test : 設置檔案描述 (ex. 副檔名為 js / vue 的檔案)
loader : 使用哪個 loader 套件進行處理
enforce : 可選擇 pre 來進行前處理 (ex. 透過 eslint 先檢查代碼有無錯誤)
include : 限制特定資料夾中的檔案 (縮小範圍、提升轉換效率)
optoins : 其他設置項目

babel

由於現行 ES6 及 ES7 語法於瀏覽器的支援度不高，但新版本 JavaScript 語法可以為開發人員帶來便捷的開發體驗，因此可以透過 Babel 這個轉碼器來將新型態 JavaScript 語法轉為接受度高的 ES5 語法，所以 vue-cli 預設就將 babel-loader 整合在 webpack 中來針對所有 js 檔進行轉換，讓我們可以直接使用 ES6 或 ES7 語法進行開發。目前最新版本為 v6.22。

可以透過 .babelrc 檔案配置相關設定，簡介如下。

{
  // 轉碼規則
  "presets": [
    // ES2015轉碼規則 (babel-preset-es2015)
    ["es2015", { "modules": false }],
    // ES7不同階段語法提案的轉碼規則 (babel-preset-stage-2)
    "stage-2"
  ],
  // 使用的插件
  "plugins": ["transform-runtime"],
  // 轉碼時不輸出註解文字
  "comments": false,
  // 不同環境可以設定不同配置
  "env": {
    // BABEL_ENV 為 test 的時候使用 babel-plugin-istanbul 插件
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

ESLint

使用 ESLint 目的在於確保程式碼的一致性和避免錯誤，每條規則都各自獨立且可以設置啟用或關閉，讓弱型別的 JavaScript 語言可以在編碼的過程中及時發現問題並修正；可以透過 .eslintrc 檔案配置相關設定，簡介如下。目前最新版本為 v3.14。

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  // 指定腳本的運行環境
  // 每種環境都有一組特定的預定義全局變量
  env: {
    browser: true,
    // 啟用 jQuery 全局變量。
    jquery: true   
  },
  extends: 'standard',
  plugins: [
    'html'
  ],
  // 啟用的規則及各自的錯誤級別
  // 0: 關閉規則, 1: 開啟規則[warn], 2: 開啟規則[error]-程序會退出
  'rules': {
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  },
  // 當訪問未定義的變量時，no-undef 規則將發出警告
  // 因此需定義腳本在執行期間訪問的額外的全局變量
  // true 允許變量被重寫, false 不允許被重寫
  globals: {
    "_": true,
    "toastr": true
  }
}