VUE background management interface case sharing

In this article, we mainly share with you VUE backend management interface cases. The main functions are as follows.

Login and exit function

Internationalized Chinese and English interface switching

Dynamic menu list

Component switching display is realized through the addition and subtraction of dynamic tabs

Route switching menu function

vue implements the construction of the web front-end framework. By adding independent components on this basis, you can quickly develop a complete back-end management system

Effect display

Technology stack

vue.js is an MVVM framework for building user interfaces. The core idea is: data-driven, component system.

vue-cli is a scaffolding tool for Vue, with directory structure, local debugging, code deployment, hot loading, and unit testing.

vue-router is the official router that makes it easy to build single-page applications using vue.js.

vue-resource requests data and communicates with the server.

vuex is a state management model specially developed for vue.js applications. Simply put, Vuex manages data.

Element is a desktop component library based on Vue 2.0 prepared for developers, designers and product managers

Vue-progressbar progress bar component.

vue-i18n international resource management component.

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

Project Organizational Structure

├─ .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

Related recommendations:

Detailed explanation of using React Family Bucket to build a background management system example

[Backend Template] Collected 5 high-end and elegant website backend management system templates

Today’s recommendation: Ten simple and elegant websites Backstage management system template

The above is the detailed content of VUE background management interface case sharing. For more information, please follow other related articles on the PHP Chinese website!