webAdmin
1.0.0
Solución de sistema de gestión backend basada en la serie Vue.js 2.x + Element UI. dirección en línea
documento en ingles
Anteriormente, la empresa utilizaba la biblioteca de componentes Vue + Element para construir un sistema de gestión de backend. Básicamente, muchos componentes pueden hacer referencia directamente a la biblioteca de componentes, pero también hay algunas necesidades que no se pueden satisfacer. Las funciones que son muy comunes en los sistemas de gestión back-end, como recortar y cargar imágenes, editores de texto enriquecido, gráficos, etc., necesitan hacer referencia a otros componentes para completarse. Desde la búsqueda de componentes hasta su uso, encontré muchos problemas y acumulé una valiosa experiencia. Entonces resumí mi experiencia en el desarrollo de este sistema de administración de backend en esta solución de sistema de administración de backend.
Como conjunto de plantillas de marco de backend multifuncionales, esta solución es adecuada para el desarrollo de la mayoría de los sistemas de gestión de backend (sistema de gestión web). Basado en vue.js, utilice el andamio vue-cli para generar rápidamente un directorio de proyecto y hacer referencia a la biblioteca de componentes Element UI para facilitar el desarrollo de componentes rápidos, concisos y hermosos. Separe los estilos de color, admita el cambio manual de colores del tema y es muy conveniente usar colores de tema personalizados.
|-- 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 encapsula el componente gráfico de sChart.js. Dirección de visita: 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 conjunto de biblioteca de componentes de escritorio basado en vue.js2.0. Dirección de visita: elemento
Un componente del lado del servidor vue.js para crear tablas dinámicamente. Dirección de acceso: vue-datasource
Editor de texto enriquecido para Vue2 basado en Quill. Dirección de acceso: vue-quill-editor
Componente Markdown Editor para Vue.js. Dirección de visita: Vue-SimpleMDE
Un complemento de carga de vue liviano que admite recorte. Dirección de acceso: Vue-Core-Image-Upload
Por ejemplo, si no quiero utilizar el componente vue-datasource, debo hacerlo en cuatro pasos.
Paso 1: elimine la ruta del componente. En el directorio src/router/index.js, busque la ruta que introdujo el componente modificado y elimine el siguiente código.
{
path : '/vuetable' ,
component : resolve => require ( [ '../components/page/VueTable.vue' ] , resolve ) // vue-datasource组件
} ,Paso 2: Elimina el archivo que presenta el componente. Elimine el archivo VueTable.vue en el directorio src/components/page/.
Paso 3: elimine la entrada a esta página. En el directorio src/components/common/Sidebar.vue, busque la entrada y elimine el siguiente código.
< el-menu-item index =" vuetable " > Vue表格组件</ el-menu-item >Paso 4: desinstale el componente. Ejecute el siguiente comando:
npm un vue-datasource -S
Finalizar.
Paso uno: abra el archivo src/main.js, busque el lugar donde se introduce el estilo del elemento y cámbielo al tema verde claro.
import 'element-ui/lib/theme-default/index.css' ; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题Paso 2: abra el archivo src/App.vue, busque el lugar donde la etiqueta de estilo introduce el estilo y cambie al tema verde claro.
@ import "../static/css/main.css" ;
@ import "../static/css/color-dark.css" ; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/Paso 3: abra el archivo src/components/common/Sidebar.vue, busque la etiqueta el-menu y elimine theme="dark".
