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

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

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

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

可能遇到的問題

問題：
運行 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. 框架/插件使用

可能遇到的問題

問題：
當你隨便寫了一點代碼而後點擊保存後，瀏覽器中會顯示以下報錯信息：

那是由於項目默認開啓了 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
      },
      ...
    ]
  },

直接註釋掉相關規則就能夠了。

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)

完整組件列表以 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>

能夠按需引入的模塊列表見 https://github.com/ecomfe/ech...

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"
    })
  ]
}

相關文檔/文章：

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

5. 總結

到此爲主，全部準備工做都作好了，能夠盡情地開發頁面內容了。
若是對 Vue 或 vue-router 的使用有所疑問，查看官方文檔基本就能將問題解決了。有空的時候我再將其餘開發過程當中遇到的問題整理出來。