vue2admin Download - vue2admin Code source Télécharger

vue2admin

Autres catégories

1.0.0

Télécharger

Vue2 -Admin -Une base d'échafaudage Vue2.js

Basé sur Vue2 + Vue-Router + Vuex + Fetch + PostCSS + Element-UI (peut également utiliser une autre interface utilisateur, telle que iView) + WebPack2, un cadre de base du système de gestion de fond.

Capacité du cadre:

Architecture complète des composants
CSS nommé espace basé sur des composants est indépendant et ne se pollue pas mutuellement
Fonction de connexion (en utilisant le schéma de persistance de Vuex et Cookie pour effectuer le cache d'authentification de connexion)
Prise en charge de l'itinéraire à plusieurs niveaux
Gestion de l'État basée sur Vuex2 (il est recommandé d'installer le statut de suivi de la prise chromée Vue.js Devtools pendant le développement))
Vuex2 et soutien de la persistance de Cookie (soutient la persistance du statut Vuex spécifié et peut spécifier le temps d'expiration des cookies). Pour des exemples spécifiques, veuillez consulter le code source du projet: Src Store index.js
PostCSS Prise en charge: Prise en charge du préfixe d'assemblage automatique (plug-in AutoPrefixer), prends en charge la dernière grammaire CSS (plug-in postcss-cssnext) et prends en charge la méthode @IMPort pour introduire CSS. Pour des exemples spécifiques, veuillez consulter le code source du projet: Src modules page1 index.vue
Service réseau basé sur Fetch (Chemin de code source: src utils request.js)
Support Mock Data Service (Exemple simulé: SRC APIS MOCK)
Sur la base de la compilation de développement et de construction de WebPack2: GRH qui prend en charge la phase de développement, les dépendances de module de support, l'optimisation des ressources statiques, l'emballage des modules et les fonctions de compilation d'empreintes digitales de hachage, une commande peut compléter la construction de l'ensemble du projet, compiler et compiler
Fournir un exemple de schéma d'emballage de projet WebPack (à la demande de code de code), voir le répertoire: src modules code-Spliting-Demo

Cliquez ici pour afficher l'effet en cours (le nom d'utilisateur et le mot de passe ne sont pas limités)

说明：项目框架已经集成了大部分前端项目必须的插件服务和项目逻辑架构，可以拿来即用。让框架尽量简单，逻辑尽量清晰，编译构建过程完全可定制，也是本框架追求的目标之一。

Configuration de la construction

依赖环境：运行项目前请确认本地已安装nodejs和npm。依赖的版本如下：
- "node": ">= 4.0.0"
- "npm": ">= 3.0.0"

※ 开发和运行时阶段依赖的其他包请到package.json中查看

 # 安装依赖-国内用户推荐使用npm淘宝镜像，设置方法：
# step1.npm config set registry https://registry.npm.taobao.org 
# step2.npm info underscore 
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 e2e tests
npm run e2e

# run all tests
npm test

Structure du répertoire d'ingénierie

 src：项目源码。开发的时候代码写在这里。
 |--assets # 项目静态资源，编译时不进行处理的资源都放这里
 |--components # 项目公共组件库
 |--config # 公共配置文件，例如路由配置等
 |--css # 项目公共样式库
 |--modules # 项目应用模块，根据应用需要，还可以有子模块，各子模块目录结构和顶级子模块类似
 |    |--components # 模块级公共组件
 |    |--views # 模块视图
 |    |--css # 模块样式
 |    |--js # 模块脚本
 |--App.vue # 项目根视图
 |--main.js # 项目入口文件
 |--store # 基于vuex的状态管理模块
 |    |--index.js # 入口及store初始化
 |    |--mutation-types.js # mutation名称定义
 |    |--state.js # 根state
 |    |--mutations.js # 根mutation
 |    |--getters.js # 根getter
 |    |--actions.js # 根action
 |    |--modules # 子模块的store对象
 |    |    |--menu.js # menu模块
 |--apis # 服务层ajax请求服务
 |    |--mock # api数据mock服务
 |--utils # 公共库函数
 |    |--request.js # 网络请求服务，实现了对fetch的二次封装（目前只封装了get,post；实际项目中可按着示例封装其他请求）