VUE后臺管理界面案例分享

來源：懂視網責編：小采時間：2020-11-27 20:04:28

VUE后臺管理界面案例分享

VUE后臺管理界面案例分享:本文我們主要和大家分享VUE后臺管理界面案例，主要功能有以下。登錄退出功能國際化中英文界面切換動態菜單列表通過動態頁簽增減實現組件切換展示路由切換菜單功能vue 實現網頁版前端框架搭建，只需在此基礎上增加獨立組件，便可很快速開發一個完善的后臺管理

推薦度：

點擊下載本文 文檔為doc格式

導讀VUE后臺管理界面案例分享:本文我們主要和大家分享VUE后臺管理界面案例，主要功能有以下。登錄退出功能國際化中英文界面切換動態菜單列表通過動態頁簽增減實現組件切換展示路由切換菜單功能vue 實現網頁版前端框架搭建，只需在此基礎上增加獨立組件，便可很快速開發一個完善的后臺管理

本文我們主要和大家分享VUE后臺管理界面案例，主要功能有以下。

登錄退出功能

國際化中英文界面切換

動態菜單列表

通過動態頁簽增減實現組件切換展示

路由切換菜單功能

vue 實現網頁版前端框架搭建，只需在此基礎上增加獨立組件，便可很快速開發一個完善的后臺管理系統

效果展示

技術棧

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

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

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

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

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

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

Vue-progressbar 進度條組件。

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

Build Setup

# install dependencies
npm install

# 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打包執行文件 
├─ 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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com