用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

參考文檔

前序准備

運行前准備:

由於此項目是基於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 bulid (生成打包之后的項目文件,此文件主要用於項目部署)。

演示

測試賬號:

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

注意:

  • admin擁有最高權限,可以查看所有的頁面和按鈕;
  • editor只有被賦予權限的頁面和按鈕才可以看到;

技術答疑

項目說明:小愛ADMIN 是完全開源免費的管理系統集成方案,可以直接應用於相關后台管理系統模板;很多重點地方都做了詳細的注釋和解釋。如果你也一樣喜歡前端開發,歡迎加入我們的討論/學習群,群內可以提問答疑,分享學習資料;

歡迎加入答疑qq群:602515030


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM