用vue2.0+vuex+vue-router+element-ui+mockjs實現後臺管理系統的實踐探索

用vue2.0+vuex+vue-router+element-ui+mockjs實現後臺管理系統

A magical vue element touzi admin.

• 效果演示地址

更多demo展現

分支說明

master分支：先後端統一開發的版本；能夠用於學習nodejs+mongodb+express相關知識；

dev分支：進行了先後端分離的版本；用戶只關注於前端部分，可忽略服務端；下載下來，便可運行；

dev-permission分支：增長了權限管理(包括頁面權限和按鈕權限)的功能；同時將項目進行了重構；

About

本文主要講解dev-permission分支內容：

若是對您對此項目有興趣，能夠點 "Star" 支持一下 謝謝！ ^_^
  
  或者您能夠 "follow" 一下，我會不斷開源更多的有趣的項目
  
  開發環境 windows 64 、nodejs 6.11.0
  
  若有問題請直接在 Issues 中提，或者您發現問題並有很是好的解決方案，歡迎 PR
複製代碼

技術棧

前端技術棧： vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui

服務端技術棧： easy-mock,mockjs

參考文檔

easy-mock使用，請參考官方文檔;

mockjs使用，請參考官方文檔;

前序準備

運行前準備：

因爲此項目是基於nodejs的先後端結合項目，你須要進行nodejs的相關準備工做。項目運行以前，請確保系統已經安裝如下應用：

(1)、node (6.0 及以上版本)。使用細節，請參考：node的下載及安裝。

開發

git clone -b dev-permission github.com/wdlhao/vue2… (注意：要從dev-permission分支拉取代碼)

cd vue2-element-touzi-admin

npm install

本地運行：

npm run dev 運行以後，會默認打開本地訪問路徑：http://localhost:8012

發佈：

npm run bulid (生成打包以後的項目文件,此文件主要用於項目部署)。

演示

測試帳號:

1. username: admin password: 123456
2. username: editor password: 123456

注意：

admin擁有最高權限，能夠查看全部的頁面和按鈕；

editor只有被賦予權限的頁面和按鈕才能夠看到；

技術答疑

項目說明：小愛ADMIN 是徹底開源免費的管理系統集成方案，能夠直接應用於相關後臺管理系統模板；不少重點地方都作了詳細的註釋和解釋。若是你也同樣喜歡前端開發，歡迎加入咱們的討論/學習羣，羣內能夠提問答疑，分享學習資料；

歡迎加入答疑qq羣：602515030