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

  • 25151
  • 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
    }
    // ...
}

打包後輸出檔案位置:

  1. path 表示打包完成的檔案放置位置 (預設為 dist 資料夾)
  2. fileanme 中的 [name] 會依據 entry 屬性名稱變動;可以使用 [chunkhash] 根據內容 hash 作為檔名,隨著內容變動而變動,避免過板時舊檔被快取而產生問題
  3. 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 更加精簡:

  1. extensions : 自動解析副檔名,設定後可用 require('boo') 表示 require('boo.vue')  
  2. modules : 模組搜索路徑,設定後可用 require('boo.js') 取代相對路徑 require('../src/boo.js')
  3. 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 來處理對應檔案的轉換作業:

  1. test : 設置檔案描述 (ex. 副檔名為 js / vue 的檔案)
  2. loader : 使用哪個 loader 套件進行處理
  3. enforce : 可選擇 pre 來進行前處理 (ex. 透過 eslint 先檢查代碼有無錯誤)
  4. include : 限制特定資料夾中的檔案 (縮小範圍、提升轉換效率)
  5. 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
  }
}

 

 

參考資訊


Webpack 2.2 中文文檔

Babel - Use next generation JavaScript, today

ESLint - The pluggable linting utility for JavaScript and JSX


希望此篇文章可以幫助到需要的人

若內容有誤或有其他建議請不吝留言給筆者喔 !