建立工程目錄

在開始一切的講解前，我們先建立一個全新的工程。推薦直接使用vue官方提供的命令列工具vue-cli，它能快速的生成一個基於vue和webpack的單頁面應用。

# 全域性安裝vue-cli
npm install vue-cli -g

# 選擇你的專案根資料夾
# e:
# cd vue-project

# 建立webpack專案
# vue init [vue-cli模板名稱] [專案資料夾]
vue init webpack my-project

# 安裝依賴
npm install

在安裝中有自動提示，要求輸入專案名稱、描述、作者、關鍵字、是否使用eslint、是否加入單元測試。有需求的話按照提示直接輸入或選擇即可，沒有需求的話一路按回車和Y就行了。

當完成上述步驟後，你就能夠在e:\vue-project\my-project中找到自動生成完畢的專案。然後大家可以根據實際需要或者編寫習慣來建立其中的具體目錄。以下為參考目錄：

|- src/
|  |- assets/           // 靜態檔案目錄：css、images等
|  |- components/       // 元件檔案目錄
|  |- page/             // 具體業務頁面目錄
|  |- router/           // vue-router的路由目錄
|  |- store/            // vuex目錄
|  |- util/             // 工具類目錄
 

|- main.js              // webpack入口檔案
|- App.vue              // 入口頁面

ajax外掛選擇

在jQuery時代，ajax的使用一般直接用jQuery自己提供的就好。但是當使用vue作為底層開發框架時，因很少再去直接操作DOM的關係，jQuery本身就很少被提及了。所以這裡推薦大家使用axios作為ajax外掛，這也是vue官方所推薦的外掛。axios的安裝和使用都很簡單，但其在專案中的具體配置會在今後的章節中涉及，此處不做詳細討論。現在我們只需要知道它能實現ajax就可以了。

模擬ajax返回資料

在實際的開發過程中，經常會遇到前端需要後端的資料，但後端並沒有完成該功能的情況。這種問題有很多種解決方案，比如搭建一個前後端公用的Mock Server。不過在專案前期如果沒有充足準備的話，對於前端同學來說，使用Mockjs來實現這個需求則更加方便、快速一點，和專案本身整合到一起，不用再搭建伺服器了。

注意：在本地專案中整合Mockjs，只應該用於前期開發或工作比較忙的時候，後期還是應該有統一的API測試平臺，保證前後端都能通過該平臺測試自己的功能，並能夠對API協議進行統一管理。

跨域問題

如果在開發過程中，ajax請求地址非本服務相同主機和相同埠，則會因瀏覽器自身的安全機制，導致出現跨域問題。解決該問題最好的方法是讓後臺同學配置CORS，或者在webpack中設定proxyTable，或者自己搭建nginx服務進行反向代理。

這裡主要說一下關於webpack中proxyTable的設定（其實是vue-cli生成的專案自帶的配置項）。請注意，webpack的proxyTable只在開發環境中有效！以下說明均引用自vue-cli對webpack模板的說明，這裡為原文連結：vuejs-templates

在config/index.js中編輯dev.proxyTable項，以設定代理規則。在開發環境中，實際上使用的是http-proxy-middleware外掛實現的代理功能，所以它的詳細用法你應該參考其官方文件，這裡有個簡單的例子：

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // 所有以/api 為字首的請求將被代理到http://jsonplaceholder.typicode.com
      // 即 /api/getNav -> http://jsonplaceholder.typicode.com/getNav
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

優化webpack配置

vue-cli預設生成的專案工程雖然很全，但仍有一部分需要進行修改，以更好的適應實際開發。這裡僅列舉針對工程的全域性修改，在實際開發中可能會有更多的修改，比如增加loader等

增加babel-polyfill

vue-cli預設生成的專案中自帶了babel-plugin-transform-runtime，其保證了一定的瀏覽器相容性。但其存在兩個問題：

1. 非同步載入元件時，會產生 polyfill 程式碼冗餘
2. 不支援對全域性函式與例項方法的 polyfill
   介於以上兩種缺點，我們需要增加babel-polyfill，同時刪除babel-plugin-transform-runtime

在命令列中輸入以下命令

# 安裝babel-polyfill
npm install babel-polyfill --save

# 解除安裝babel-plugin-transform-runtime
npm uninstall babel-plugin-transform-runtime --save

修改檔案.babelrc

"plugins": [
    // "transform-runtime"
],

在入口檔案main.js中引入babel-polyfill

import 'babel-polyfill'

增加路徑別名

在實際開發中，某些路徑層級可能會很深，如果使用相對路徑可能會有無數的../../。為解決這種問題，我們可以增加路徑別名，以減少開發過程中路徑的複雜性。

修改檔案：webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'util': '@/util',
      'asset': '@/asset'
      ...
    }
}

修改單頁面應用根模板index.html位置

webpack預設的根模板路徑與src目錄同級。但我更喜歡把根模板放置到src目錄中。如果你也有像我這樣的需求，那麼按以下修改即可

// 開發環境：webpack.dev.conf.js
new HtmlWebpackPlugin({
    filename: 'index.html',
    // template: 'index.html',
    template: './src/index.html',
    inject: true
})

// 生產環境`webpack.prod.conf.js`
new HtmlWebpackPlugin({
    filename: config.build.index,
    // template: 'index.html',
    template: './src/index.html',
    ...
}),

修改chunk檔名

如果你不希望看到各種以數字開頭的檔名的話，可以按照以下方式修改。如果你覺得hash太長，也可以限定其長度

// webpack.prod.conf.js
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    chunkFilename: utils.assetsPath('js/[name].[chunkhash:7].js')
}

完善各種型別的css-loader

在build/utils.js 中我們可以看到，vue-cli專案自動幫我們判斷了需要哪些css的loader。如果你想以後不再輕易動package.json的話，你完全可以把這些loader都安裝上。其中安裝sass-loader前需要提前安裝node-sass。安裝less-loader前需要安裝less。以下為安裝sass-loader和less-loader

npm install node-sass sass-loader less less-loader --save-dev

NEXT——路由篇

專案建立及配置完畢後，我們將開始編寫後臺管理系統中最重要也是最基礎的部分——路由及其許可權。基於許可權的頁面跳轉將會是重中之重。

原始碼

當前原始碼地址：https://github.com/harsima/vue-backend
請注意，該原始碼會不斷更新（因為工作很忙不能保證定期更新）。原始碼涉及到的東西有超出本篇教程的部分，請酌情閱讀。

本系列目錄