VUE 後臺管理界面案例(mock+express）

介紹

vue 實現網頁版前端框架搭建，只需在此基礎上增長獨立功能，即可很快速開發一個完善的後臺管理系統。

源碼地址

源碼地址： https://github.com/toutouping...

主要功能

登陸退出功能

國際化中英文界面切換

動態菜單列表

經過動態頁籤增減實現組件切換展現

路由切換菜單功能

經過mock + express 實現先後端分離

效果展現

技術棧

vue.js 構建用戶界面的 MVVM 框架，核心思想是：數據驅動、組件系統。

vue-cli 是vue的腳手架工具，目錄結構、本地調試、代碼部署、熱加載、單元測試。

vue-router 是官方提供的路由器，使用vue.js構建單頁面應用程序變得垂手可得。

vue-resource 請求數據，服務器通信。

vuex 是一個專爲 vue.js 應用程序開發的狀態管理模式，簡單來講Vuex就是管理數據的。

Element 一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫

Vue-progressbar 進度條組件。

vue-i18n 國際化資源管理組件。

mock mock是一個模擬數據生成器,旨在幫助前端獨立於後端進行開發,幫助編寫單元測試。

Build Setup

# install dependencies
cnpm install

# 啓動前端數據接口（先後端分離）at localhost:8082/api/
npm run mock

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

項目組織架構

├─ .eslintrc.js ├─ index.html ├─ package.json // 配置文件 ├─ README.md // 說明文件 ├─ build // webpack打包執行文件 ├─ mock // mock先後端分離實現的數據接口 ├─ config // webpack打包配置文件 ├─ code-standards //編碼規範 ├─ src   │　　├─ main.js // webpack入口/項目啓動入口 │　　├─ api // 存放api接口文件，服務層 │　　├─ common // 存放私有系統的公共樣式、腳本、圖片 │　　│　　├─ css │　　│　　│　　└─ common.css // 公共樣式 │　　│　　├─ img // 公共圖片 │　　│　　├─ js │　　│　　│　　├─ common.js // 公共腳本 │　　│　　│　　└─ utils.js // 工具類 │　　├─ config │　　│　　├─ index.js // 共有配置文件 │　　├─ router │　　│　　├─ index.js // 存放路由 │　　├─ views // 視圖 （路由跳轉的頁面） │　　├─ pages //子視圖（嵌套） │　　│　　├─ pages.md │　　├─ vuex // 這一塊將存放於common項目 │　　│　　├─ index.js │　　│　　├─ actions │　　│　　├─ getters │　　│　　└─ modules