webAdmin
1.0.0
Solution de système de gestion backend basée sur la série Vue.js 2.x + Element UI. adresse en ligne
document anglais
Auparavant, la société utilisait la bibliothèque de composants Vue + Element pour créer un système de gestion backend. Fondamentalement, de nombreux composants peuvent référencer directement la bibliothèque de composants, mais certains besoins ne peuvent pas être satisfaits. Les fonctions très courantes dans les systèmes de gestion back-end, telles que le recadrage et le téléchargement d'images, les éditeurs de texte enrichi, les graphiques, etc., doivent faire référence à d'autres composants pour être exécutées. De la recherche de composants à leur utilisation, j'ai rencontré de nombreux problèmes et accumulé une expérience précieuse. J'ai donc résumé mon expérience dans le développement de ce système de gestion backend dans cette solution de système de gestion backend.
En tant qu'ensemble de modèles de framework backend multifonctionnels, cette solution convient au développement de la plupart des systèmes de gestion backend (Web Management System). Basé sur vue.js, utilisez l'échafaudage vue-cli pour générer rapidement un répertoire de projet et référencer la bibliothèque de composants Element UI pour faciliter le développement de composants rapides, concis et esthétiques. Styles de couleurs séparés, prise en charge de la commutation manuelle des couleurs de thème et il est très pratique d'utiliser des couleurs de thème personnalisées.
|-- build // webpack配置文件
|-- config // 项目打包路径
|-- src // 源码目录
| |-- components // 组件
| |-- common // 公共组件
| |-- Header.vue // 公共头部
| |-- Home.vue // 公共路由入口
| |-- Sidebar.vue // 公共左边栏
| |-- page // 主要路由页面
| |-- BaseCharts.vue // 基础图表
| |-- BaseForm.vue // 基础表单
| |-- BaseTable.vue // 基础表格
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Readme.vue // 自述组件
| |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器
| |-- VueTable.vue // vue表格组件
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 代码编写规格
|-- .gitignore // 忽略的文件
|-- index.html // 入口html文件
|-- package.json // 项目及工具的依赖配置文件
|-- README.md // 说明
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地
cd manage-system // 进入模板目录
npm install // 安装项目依赖，等待安装完成之后
// 开启服务器，浏览器访问 http://localhost:8080
npm run dev
// 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build
vue.js encapsule le composant graphique de sChart.js. Adresse de visite : vue-schart
< template >
< div >
< schart : canvasId = " canvasId "
: type = "type"
: width = "width"
: height = "height"
: data = "data"
: options = "options"
> </ schart >
</ div >
</ template >
< script >
import Schart from 'vue-schart' ; // 导入Schart组件
export default {
data : function ( ) {
return {
canvasId : 'myCanvas' , // canvas的id
type : 'bar' , // 图表类型
width : 500 ,
height : 400 ,
data : [
{ name : '2014' , value : 1342 } ,
{ name : '2015' , value : 2123 } ,
{ name : '2016' , value : 1654 } ,
{ name : '2017' , value : 1795 } ,
] ,
options : { // 图表可选参数
title : 'Total sales of stores in recent years'
}
}
} ,
components : {
Schart
}
}
< / script>Un ensemble de bibliothèques de composants de bureau basé sur vue.js2.0. Adresse de visite : élément
Un composant côté serveur vue.js pour créer dynamiquement des tables. Adresse d'accès : vue-datasource
Éditeur de texte enrichi pour Vue2 basé sur Quill. Adresse d'accès : vue-quill-editor
Composant Markdown Editor pour Vue.js. Adresse de visite : Vue-SimpleMDE
Un plug-in de téléchargement de vue léger qui prend en charge le recadrage. Adresse d'accès : Vue-Core-Image-Upload
Par exemple, si je ne souhaite pas utiliser le composant vue-datasource, je dois le faire en quatre étapes.
Étape 1 : Supprimez la route du composant. Dans le répertoire src/router/index.js, recherchez la route qui a introduit le composant modifié et supprimez le code suivant.
{
path : '/vuetable' ,
component : resolve => require ( [ '../components/page/VueTable.vue' ] , resolve ) // vue-datasource组件
} ,Étape 2 : Supprimez le fichier qui introduit le composant. Supprimez le fichier VueTable.vue dans le répertoire src/components/page/.
Étape 3 : Supprimez l’entrée de cette page. Dans le répertoire src/components/common/Sidebar.vue, recherchez l'entrée et supprimez le code suivant.
< el-menu-item index =" vuetable " > Vue表格组件</ el-menu-item >Étape 4 : Désinstallez le composant. Exécutez la commande suivante :
npm un vue-datasource -S
Finition.
Première étape : ouvrez le fichier src/main.js, recherchez l'endroit où le style d'élément est introduit et remplacez-le par le thème vert clair.
import 'element-ui/lib/theme-default/index.css' ; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题Étape 2 : Ouvrez le fichier src/App.vue, recherchez l'endroit où la balise de style introduit le style et passez au thème vert clair.
@ import "../static/css/main.css" ;
@ import "../static/css/color-dark.css" ; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/Étape 3 : ouvrez le fichier src/components/common/Sidebar.vue, recherchez la balise el-menu et supprimez theme="dark".
