前言
之前有些過移動端的項目搭建的文章，感覺不寫個pc端管理系統老感覺少了點什么，最近公司項目比較多，恰巧要做一個申報系統的后台管理系統，鑒於對vue技術棧比較熟悉，所以考慮還是使用vue技術棧來做；看過一個不錯的后台配置模板（vue-element-admin），頁面也挺美的，但是還是礙於不想看太多關於這個模板的配置說明，於是又拉出來之前我搭建的簡易版的模板，決定重構下，使用自己搭建的后台系統模板，配置非常簡單；本文將從初始化項目開始一直到打包上線做一個詳細的介紹，看完本文章，絕對會對其中的一些配置非常熟悉，用起來也更加順手；項目github地址：https://github.com/MrKaKaluote/element-admin.git，感覺好用的，感謝給個小星星。
初始化項目
1、當前開發環境
node.js -v v8.9.3
npm -v 6.1.0
yarn -v 1.7.0
Vue -v 2.5.2
全局安裝vue-cli vue
2、新建文件夾，在文件下初始化項目
vue init webpack vue-elementui（項目名稱）
同樣一路回車如下
這里取消了ESLint代碼風格檢查工具以及單元測試模塊，當然也可以選擇保留
依賴包管理工具選擇了yarn（yarn可以緩存之前下載的模塊，可以提高模塊加載的速度）
默認選擇了vue-router模塊
然后回車，下載以來模塊
結束之后如上圖所示，cd進入項目，然后npm run dev，項目就可以跑起來了，在瀏覽器中輸入localhost:8080即可打開項目
項目初始化完畢，下面來正式開始管理后端的項目搭建
admin項目搭建配置
上面只是簡單的完成了項目的初始化，接下來將按照下面的步驟來完成項目的配置
- 相關三方插件的引入（vuex、axios、element-ui、sass）
- 項目的基本配置文件配置
- 路由管理模塊vue-router及菜單權限的配置
- 狀態管理模塊vuex的配置
- 請求模塊axios的配置
1、相關三方插件的引入（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中引入相關插件
上面是各三方插件的引入及注冊，狀態及路由的配置稍后會詳細說明
2、基礎配置文件的配置
這里剛一開始要修改的東西不多，暫且只修改以下兩處
（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用於封裝公共請求方法，詳細請看代碼