從零開始搭建vue+element-ui後臺管理系統項目到上線

前言

以前有些過移動端的項目搭建的文章，感受不寫個pc端管理系統老感受少了點什麼，最近公司項目比較多，恰巧要作一個申報系統的後臺管理系統，鑑於對vue技術棧比較熟悉，因此考慮仍是使用vue技術棧來作；看過一個不錯的後臺配置模板（vue-element-admin），頁面也挺美的，可是仍是礙於不想看太多關於這個模板的配置說明，因而又拉出來以前我搭建的簡易版的模板，決定重構下，使用本身搭建的後臺系統模板，配置很是簡單；本文將從初始化項目開始一直到打包上線作一個詳細的介紹，看完本文章，絕對會對其中的一些配置很是熟悉，用起來也更加順手；項目github地址：https://github.com/MrKaKaluote/element-admin.git，感受好用的，感謝給個小星星。

初始化項目

一、當前開發環境

node.js -v  v8.9.3

npm -v 6.1.0

yarn -v 1.7.0

Vue -v 2.5.2

全局安裝vue-cli vue

二、新建文件夾，在文件下初始化項目

vue init webpack vue-elementui（項目名稱）

一樣一路回車以下

這裏取消了ESLint代碼風格檢查工具以及單元測試模塊，固然也能夠選擇保留

依賴包管理工具選擇了yarn（yarn能夠緩存以前下載的模塊，能夠提升模塊加載的速度）

默認選擇了vue-router模塊

而後回車，下載以來模塊

 

結束以後如上圖所示，cd進入項目，而後npm run dev，項目就能夠跑起來了，在瀏覽器中輸入localhost:8080便可打開項目

項目初始化完畢，下面來正式開始管理後端的項目搭建

admin項目搭建配置

上面只是簡單的完成了項目的初始化，接下來將按照下面的步驟來完成項目的配置

1. 相關三方插件的引入（vuex、axios、element-ui、sass）
2. 項目的基本配置文件配置
3. 路由管理模塊vue-router及菜單權限的配置
4. 狀態管理模塊vuex的配置
5. 請求模塊axios的配置

一、相關三方插件的引入（vuex、axios、element-ui、sass）

既然選擇了vue全家桶的技術棧，稍大型的項目vuex是確定要用到的，同時axios必不可少，element-ui（固然還有其它ui框架能夠選擇，好比說bootscrap）、採用sass樣式預處理框架，下面就安裝下以上插件

yarn add vuex axios element-ui font-awesome--save

yarn add node-sass  -D

yarn add sass-loader -D

yarn add style-loader -D

以上幾行代碼用於下載依賴包，安裝完成以後，package.json文件以下

sass相關插件放在開發環境下面

在main.js中引入相關插件

上面是各三方插件的引入及註冊，狀態及路由的配置稍後會詳細說明

二、基礎配置文件的配置

這裏剛一開始要修改的東西很少，暫且只修改如下兩處

（1）配置favicon.ico

要配置出本身的框架，一些基礎的配置文件仍是要修改的，先來講個最簡單的好了

拿百度來講，先把標籤上的圖表弄出來，這個配置要去修改buld ==> webpack.base.conf.js文件

在webpack.base.conf.js文件中引入html-webpack-plugin組件，這個模塊能夠爲html文件中引入的外部資源，咱們使用它來添加圖標，代碼以下

const HtmlWebpackPlugin = require('html-webpack-plugin') //爲html文件中引入的外部資源

// 配置在module.exports裏面
plugins: [
  new HtmlWebpackPlugin({
     template: 'index.html',
     favicon: 'favicon.ico',
     inject: true
   })
 ],

將圖標生成的favicon.ico文件放在根目錄下便可，如何生成favicon.ico請自行百度，很簡單

（2）請求的代理

如今尚未配置請求模塊axios，配置好了以後請求接口會遇到跨域問題，修改config ==>index.js裏面的proxyTable，可配置跨域代理。代碼以下

proxyTable: {
    '/api/': {    // api爲代理接口
          target: 'http://localhost:8085/',    // 這裏我代理到本地服務
          changeOrigin: true
     }
},

目前基礎的配置先修改這兩處，若有其它修改的地方在下面會提到，接下來配置項目三大模塊（router、axios、vuex）

配置router及菜單權限

在我看來，一個項目最基礎的模塊就屬於路由的配置了，路由不通，頁面沒法跳轉，一切都是浮雲，下面就經過路由配置來搭建起項目的基本樣子。

在src目錄下面新建如下目錄和菜單

新建以上文件及文件夾，做用已在上面作標註，重點來講下router.js和home.vue的配置

（1）router.js

首先要保證全部的子頁面跳轉都在home頁面的框架下，路由配置以下

{
    path: '/menu1',
    component: home,
    name: '菜單一',
    iconCls: 'el-icon-message', //圖標樣式class
    children: [
      {
        path: 'sub1',
        component: sub11,
        name: '子菜單一'
      },
      {
        path: 'sub2',
        component: sub12,
        name: '子菜單二'
      }
    ]
  },
  {
    path: '/menu2',
    component: home,
    name: '菜單二',
    iconCls: 'el-icon-message',
    children: [
      {
        path: 'sub1',
        component: sub21,
        name: '配置管理'
      }
    ]
  }

全部的父組件都爲home組件，這樣就能夠保證子頁面的跳轉都在home的框架下，詳細的配置請看我項目中的配置

（2）home.vue

home組件中的菜單配置是根據路由遍歷出來的，以下代碼

<!--導航菜單-->
<aside :class="'menu-expanded'">
  　<el-menu :default-active="$route.path" ref="bigmenu" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" unique-opened router>
        <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden && checkContains(item.name)">
           <el-submenu :index="index+''" v-if="!item.single">
             <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
             <el-menu-item v-for="child in item.children" @click="addRouter(child, item.path +'/'+ child.path)" :index="item.path +'/'+ child.path" :key="item.path +'/'+ child.path" v-if="!child.hidden && checkContains(child.name)">{{child.name}}</el-menu-item>
           </el-submenu>
           <router-link v-else v-for="child in item.children" :index="child.path" :key="child.path" :to="child.path">
              <div @click="addRouter(child)" class="single-menu">{{child.name}}</div>
           </router-link>
         </template>
    </el-menu>
 </aside>

checkContains方法用來檢測後臺給的樹結構中是否包含此節點，這裏用來進行權限控制，一樣的，項目代碼裏都有清晰的註釋，可看源碼

狀態管理模塊vuex的配置

狀態管理的配置同我以前寫的移動端的同樣

在src目錄下新建store文件夾，以下圖

在main.js中引入store/index.js，而後全局註冊便可使用，詳細請看代碼

請求模塊axios的配置

請求模塊的封裝也和以前寫的移動端的配置同樣

在src目錄下新建api和config目錄

common.js用於封裝請求api

index.js用於封裝公共請求方法，詳細請看代碼