Partage de cas de l'interface de gestion d'arrière-plan VUE

Dans cet article, nous partageons principalement avec vous des cas d'interface de gestion backend VUE. Les principales fonctions sont les suivantes.

Fonction de connexion et de déconnexion

Commutation internationalisée des interfaces chinoises et anglaises

Liste de menus dynamiques

Réalisez un affichage de commutation de composants grâce à l'ajout et à la soustraction dynamiques d'onglets

Fonction de menu de changement d'itinéraire

Vue réalise la construction d'un cadre frontal Web En ajoutant des composants indépendants sur cette base, vous pouvez rapidement développer un système de gestion backend complet

Affichage des effets<.>

Technology Stack

vue.js est un framework MVVM pour la création d'interfaces utilisateur. L'idée principale est : un composant basé sur les données. système.

vue-cli est un outil d'échafaudage pour Vue, avec structure de répertoires, débogage local, déploiement de code, chargement à chaud et tests unitaires.

vue-router est le routeur officiel qui facilite la création d'applications d'une seule page à l'aide de vue.js.

vue-resource demande des données et communique avec le serveur.

vuex est un modèle de gestion d'état développé spécifiquement pour les applications vue.js En termes simples, Vuex gère les données.

Element est une bibliothèque de composants de bureau basée sur Vue 2.0 préparée pour les développeurs, les concepteurs et les chefs de produit

Composant de barre de progression Vue-progressbar.

vue-i18n composant de gestion des ressources internationales.

Configuration de la construction

# 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

Structure organisationnelle du projet

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

Recommandations associées :

Créer un système de gestion backend à l'aide de React Family Bucket Explication détaillée des exemples

[Modèle backend] Collecte de 5 modèles de système de gestion backend de sites Web haut de gamme et élégants

Recommandation du jour : dix simples et modèle de système de gestion backend de site Web élégant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!