webAdmin
1.0.0
Backend management system solution based on Vue.js 2.x series + Element UI. online address
English document
Previously, the company used the Vue + Element component library to build a backend management system. Basically, many components can directly reference the component library, but there are also some needs that cannot be met. Functions that are very common in back-end management systems, such as image cropping and uploading, rich text editors, charts, etc., need to reference other components to complete. From looking for components to using them, I encountered many problems and accumulated valuable experience. So I summarized my experience in developing this backend management system into this backend management system solution.
As a set of multifunctional backend framework templates, this solution is suitable for the development of most backend management systems (Web Management System). Based on vue.js, use vue-cli scaffolding to quickly generate a project directory and reference the Element UI component library to facilitate the development of fast, concise and beautiful components. Separate color styles, support manual switching of theme colors, and it is very convenient to use custom theme colors.
|-- 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 encapsulates the chart component of sChart.js. Visit address: 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>A set of desktop component library based on vue.js2.0. Visit address: element
A vue.js server-side component for dynamically creating tables. Access address: vue-datasource
Rich text editor for Vue2 based on Quill. Access address: vue-quill-editor
Markdown Editor component for Vue.js. Visit address: Vue-SimpleMDE
A lightweight vue upload plug-in that supports cropping. Access address: Vue-Core-Image-Upload
For example, if I don’t want to use the vue-datasource component, I need to do it in four steps.
Step 1: Delete the route of the component. In the directory src/router/index.js, find the route that introduced the modified component and delete the following code.
{
path : '/vuetable' ,
component : resolve => require ( [ '../components/page/VueTable.vue' ] , resolve ) // vue-datasource组件
} ,Step 2: Delete the file that introduces the component. Delete the VueTable.vue file in the directory src/components/page/.
Step 3: Delete the entry to this page. In the directory src/components/common/Sidebar.vue, find the entry and delete the following code.
< el-menu-item index =" vuetable " > Vue表格组件</ el-menu-item >Step 4: Uninstall the component. Execute the following command:
npm un vue-datasource -S
Finish.
Step one: Open the src/main.js file, find the place where the element style is introduced, and change it to the light green theme.
import 'element-ui/lib/theme-default/index.css' ; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题Step 2: Open the src/App.vue file, find the place where the style tag introduces the style, and switch to the light green theme.
@ import "../static/css/main.css" ;
@ import "../static/css/color-dark.css" ; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/Step 3: Open the src/components/common/Sidebar.vue file, find the el-menu tag, and remove theme="dark".
