webAdmin
1.0.0
Backend-Management-Systemlösung basierend auf der Vue.js 2.x-Serie + Element UI. Online-Adresse
Englisches Dokument
Zuvor nutzte das Unternehmen die Vue + Element-Komponentenbibliothek zum Aufbau eines Backend-Managementsystems. Grundsätzlich können viele Komponenten direkt auf die Komponentenbibliothek verweisen, es gibt jedoch auch einige Anforderungen, die nicht erfüllt werden können. Funktionen, die in Back-End-Verwaltungssystemen sehr häufig vorkommen, wie das Zuschneiden und Hochladen von Bildern, Rich-Text-Editoren, Diagramme usw., müssen zur Ausführung auf andere Komponenten verweisen. Von der Suche nach Komponenten bis hin zur Verwendung bin ich auf viele Probleme gestoßen und habe wertvolle Erfahrungen gesammelt. Deshalb habe ich meine Erfahrungen bei der Entwicklung dieses Backend-Managementsystems in dieser Backend-Managementsystemlösung zusammengefasst.
Als Satz multifunktionaler Backend-Framework-Vorlagen eignet sich diese Lösung für die Entwicklung der meisten Backend-Managementsysteme (Web Management System). Basierend auf vue.js können Sie mithilfe des vue-cli-Gerüsts schnell ein Projektverzeichnis generieren und auf die Element UI-Komponentenbibliothek verweisen, um die Entwicklung schneller, prägnanter und schöner Komponenten zu erleichtern. Separate Farbstile, Unterstützung des manuellen Wechsels der Designfarben und die Verwendung benutzerdefinierter Designfarben ist sehr praktisch.
|-- 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 kapselt die Diagrammkomponente von sChart.js. Besuchsadresse: 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>Eine Reihe von Desktop-Komponentenbibliotheken basierend auf vue.js2.0. Besuchsadresse: Element
Eine serverseitige Komponente von vue.js zum dynamischen Erstellen von Tabellen. Zugriffsadresse: vue-datasource
Rich-Text-Editor für Vue2 basierend auf Quill. Zugangsadresse: vue-quill-editor
Markdown-Editor-Komponente für Vue.js. Besuchsadresse: Vue-SimpleMDE
Ein leichtes Vue-Upload-Plug-in, das das Zuschneiden unterstützt. Zugangsadresse: Vue-Core-Image-Upload
Wenn ich beispielsweise die Vue-Datasource-Komponente nicht verwenden möchte, muss ich dies in vier Schritten tun.
Schritt 1: Löschen Sie die Route der Komponente. Suchen Sie im Verzeichnis src/router/index.js die Route, die die geänderte Komponente eingeführt hat, und löschen Sie den folgenden Code.
{
path : '/vuetable' ,
component : resolve => require ( [ '../components/page/VueTable.vue' ] , resolve ) // vue-datasource组件
} ,Schritt 2: Löschen Sie die Datei, die die Komponente einführt. Löschen Sie die Datei VueTable.vue im Verzeichnis src/components/page/.
Schritt 3: Löschen Sie den Eintrag auf dieser Seite. Suchen Sie im Verzeichnis src/components/common/Sidebar.vue den Eintrag und löschen Sie den folgenden Code.
< el-menu-item index =" vuetable " > Vue表格组件</ el-menu-item >Schritt 4: Deinstallieren Sie die Komponente. Führen Sie den folgenden Befehl aus:
npm un vue-datasource -S
Beenden.
Schritt eins: Öffnen Sie die Datei src/main.js, suchen Sie die Stelle, an der der Elementstil eingeführt wird, und ändern Sie ihn in das hellgrüne Design.
import 'element-ui/lib/theme-default/index.css' ; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题Schritt 2: Öffnen Sie die Datei src/App.vue, suchen Sie die Stelle, an der das Style-Tag den Stil einführt, und wechseln Sie zum hellgrünen Design.
@ import "../static/css/main.css" ;
@ import "../static/css/color-dark.css" ; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/Schritt 3: Öffnen Sie die Datei src/components/common/Sidebar.vue, suchen Sie das Tag el-menu und entfernen Sie theme="dark".
