Vue 2.x 實戰之後臺管理系統開發（一）

Alexee發表於2017-04-16
Vue

1. 導語

下文：Vue 2.x 實戰之後臺管理系統開發（二）

該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個後臺管理專案的，我會將自己遇到的問題貼出，希望可以幫助到其他人。

2. 開發前須知

我的後臺管理系統專案運用瞭如下框架/外掛：

  1. Vue 2.x —— 專案所使用的 js 框架，我所使用的版本是：2.1.10
  2. vue-router 2 —— Vue 2.x 配套路由，我所使用的版本是：2.3.0
  3. Element —— UI 框架，餓了麼出品，我所使用的版本是：1.2.8
  4. Echarts —— 圖表外掛，百度出品，我所使用的版本是：3.4.0
  • 在 UI 框架的選擇上，除了 Element，iView 也不錯，大家可以按需選擇。
  • 對於所使用的框架/外掛，儘可能先快速過一遍文件，這樣可以知道有什麼現成的東西可以使用，避免自己做多餘的工作。

3. 構建專案框架

準備

對於大陸使用者，建議將 npm 的登錄檔源設定為國內的映象，如 淘寶 NPM 映象，可以大幅提升安裝速度。

執行如下語句即可使用淘寶映象：

npm install -g cnpm --registry=https://registry.npm.taobao.org複製程式碼

使用方法為：將 npm 改為 cnpm
示例：npm install => cnpm install

安裝

根據 官方指南 執行如下命令列語句：

# 安裝 vue
$ cnpm install vue 
# 全域性安裝 vue-cli，該工具提供開箱即用的構建工具配置
$ cnpm install --global vue-cli
# 建立一個基於 webpack 模板的新專案 my-project（專案名稱）
$ vue init webpack my-project
# 進入專案目錄
$ cd my-project
# 安裝依賴
$ cnpm install
# 執行專案（不需要使用到下載功能時，沒有必要使用 cnpm）
$ cnpm run dev
# 或者（效果一樣）
$ npm run dev複製程式碼

Vue 2.x 實戰之後臺管理系統開發（一）
安裝 vue-cli webpack 模板

在 Use ESLint to lint your code? (Y/n) 這一項，如果不打算使用語法檢測，可以直接選擇 n，如果決定安裝但是又暫時不想啟用，後文有如何禁用的說明。

這時你的瀏覽器會自動開啟 localhost:8080 頁面，說明專案環境搭建成功，我們已經有了一個基於 webpack 模板的專案框架。

Vue 2.x 實戰之後臺管理系統開發（一）
模板專案

可能遇到的問題

問題：
執行 npm run dev 後報錯：

To use this template, you must update following to modules:
npm: 2.15.1 should be >= 3.0.0複製程式碼

遇到這個問題說明你的 nodejs 版本也不高，因此最好更新 node 版本及 npm 版本。

解決：

  • 升級 node 的話直接重新安裝一個新版本，安裝包 這裡 下載。
  • 升級 npm 的話可以直接執行命令列語句：
    cnpm install npm@latest -g複製程式碼
    參考：node 安裝及 npm 升級方法

專案結構

# 備註項為 webpack 模板內建。
## 備註項為按照個人喜好新增的資料夾/檔案。

.
├── build/                      # webpack config files / webpack 配置檔案
│   └── ...
├── config/
│   ├── index.js                # main project config / 專案主要配置
│   └── ...
├── src/                        # 主要的專案開發檔案都在這個目錄下：            
│   ├── main.js                 # app entry file / 應用入口檔案
│   ├── App.vue                 # main app component / App 父元件
│   ├── components/             # ui components / 可複用的 ui 元件
│   │   └── ...
│   ├── assets/                 # module assets (processed by webpack) / 模組資源（經過 webpack 處理，如檔案合併，圖片壓縮等）
│   │   └── ...
│   ├── page/                   ## 以頁面為單位的 .vue 檔案
│   │   ├── index.vue           ## 一級 router-view，頂部導航欄和左側側邊導航欄
│   │   ├── 404.vue             ## 404 頁面
│   │   ├── menu1/              ## 二級 router-view，導航切換後的頁面內容
│   │   │   └── ...
│   │   └── menu2/              ## 按照選單項建立資料夾對檔案進行組織管理
│   │       └── ...
│   └── router/                 
│       └── index.js            # 路由配置檔案
├── static/                     # pure static assets (directly copied) / 純靜態資源（直接拷貝使用，不經過 webpack 處理）
├── .babelrc                    # babel config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── ...複製程式碼

參考：webpack 模板專案結構

相關文件

官網安裝指南
vue-cli
vuejs-templates: webpack

4. 框架/外掛使用

可能遇到的問題

問題：
當你隨便寫了一點程式碼然後點選儲存後，瀏覽器中會顯示如下報錯資訊：

Vue 2.x 實戰之後臺管理系統開發（一）
Eslint 報錯

那是因為專案預設開啟了 Eslint 功能，程式碼編寫不規範就會報錯。

解決：
可以這樣禁用 Eslint：
build/webpack.base.conf.js

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
      },
      ...
    ]
  },複製程式碼

Vue 2.x 實戰之後臺管理系統開發（一）
禁用 Eslint

直接註釋掉相關規則就可以了。

Element

npm 安裝 Element：

cnpm i element-ui -S複製程式碼

引入 Element：
官方文件：引入 Element
可以完整引入也可以按需引入，為了專案的大小考慮，還是選擇按需引入比較好。

按照官方的使用說明做，就能成功將 Element 引入專案，這裡就不照搬文件了。

在根據官方指南安裝了 babel-plugin-component 並修改了 .babelrc 檔案後，針對 按需引入 的方式舉個例子：

#1 拷貝需要使用的元件程式碼

<el-dropdown>
  <span class="el-dropdown-link">
    下拉選單<i class="el-icon-caret-bottom el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黃金糕</el-dropdown-item>
    <el-dropdown-item>獅子頭</el-dropdown-item>
    <el-dropdown-item>螺螄粉</el-dropdown-item>
    <el-dropdown-item disabled>雙皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>複製程式碼

從上面的程式碼段中可以看出，我們需要引入三個元件：el-dropdown，el-dropdown-menu 和 el-dropdown-item。

#2 引入元件
在 main.js 中寫入以下內容：

// 引入元件
import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui' // 使用駝峰方式書寫元件名即可

// 使用元件
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)複製程式碼

Vue 2.x 實戰之後臺管理系統開發（一）
按需引入 Element 元件

完整元件列表以 components.json 為準，也可以檢視 專案地址\node_modules\element-ui\lib 目錄下的檔案（檔名即元件名）。

Echarts

參考文件：在 webpack 中使用 ECharts
npm 安裝 ECharts：

cnpm install echarts --save複製程式碼

引入 ECharts：
全部引入：

var echarts = require('echarts'); // 預設使用 require('echarts') 得到的是已經載入了所有圖表和元件的 ECharts 包，因此體積會比較大

// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
// 繪製圖表
myChart.setOption({
    ...
});複製程式碼

按需引入：
echarts-line.vue（基於 echarts 的折線圖元件示例）

<template>
  <!--需要唯一的 id 來初始化圖表-->
  <div class="echarts-line" :id="id">
  </div>
</template>
<script>
// 引入 ECharts 主模組
var echarts = require('echarts/lib/echarts');

// 引入折線圖
require('echarts/lib/chart/line');
// 引入提示框和標題元件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
  name: 'echarts-line',
  props: {
    id: String
  },
  mounted(){
    this.drawLine(this.id);
  },
  methods: {
    drawLine(id){
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById(id));
        // 繪製圖表
        myChart.setOption({
            title: { text: 'ECharts 入門示例' },
            tooltip: {},
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.echarts-line {
  width: 100%;
  height: 320px;
}
</style>複製程式碼

可以按需引入的模組列表見 github.com/ecomfe/echa…

jQuery

有些人可能還無法離開 jQuery 的使用（例如我，不過建議是如果使用了 vue 進行開發，就沒有必要使用 jQuery 了），並且也已經習慣了使用 Ajax（目前官方推薦的非同步請求庫為 Axios，vue-resource 已經停止更新維護）。

要想全域性使用 jQuery 的話，可以這樣做：
#1 下載 jquery 檔案
將 jquery 檔案放於 static 目錄下，如：static/js/jquery-3.0.0.min.js

#2 webpack 配置檔案
build/webpack.base.conf.js

...
var webpack = require("webpack") // 1. 確保引入 webpack，後面會用到

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'),
      "jquery": path.resolve(__dirname, '../static/js/jquery-3.0.0.min.js') // 2. 定義別名和外掛位置
    }
  },
  plugins: [
    // 3. 配置全域性使用 jquery
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
}複製程式碼

Vue 2.x 實戰之後臺管理系統開發（一）
引入 webpack

Vue 2.x 實戰之後臺管理系統開發（一）
配置 jquery

相關文件/文章：

ESLint
Element
ECharts
jquery 配置參考
Vue框架引入JS庫的正確姿勢

5. 總結

到此為主，所有準備工作都做好了，可以盡情地開發頁面內容了。
如果對 Vue 或 vue-router 的使用有所疑問，檢視官方文件基本就能將問題解決了。
有空的時候我再將其他開發過程中遇到的問題整理出來。

相關文章