vue-manage-system : Vue2 后台管理系统解决方案
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。
github地址:https://github.com/lin-xin/vue-manage-system
demo地址:lin-xin.gitee.io/example/work/
项目截图
默认皮肤
浅绿色皮肤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A9raPDIL-1573268893452)(https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)]
前言
之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。从寻找组件,到使用组件的过程中,遇到了很多问题,也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验,总结成这个后台管理系统解决方案。
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于vue.js,使用vue-cli脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。
功能
- Element UI
- 登录/注销
- 表格
- 表单
- 图表
- 富文本编辑器
- markdown编辑器
- 图片拖拽/裁剪上传
- 支持切换主题色
模板安装步骤
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
组件使用说明与演示
element-ui
一套基于vue.js2.0的桌面组件库。访问地址:element
Vue-Quill-Editor
基于Quill、适用于Vue2的富文本编辑器。访问地址:vue-quill-editor
<template><div><quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor></div>
</template><script>import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件export default {data: function(){return {content: '', // 编辑器的内容editorOption: { // 编辑器的配置// something config}}},components: {quillEditor // 声明组件quillEditor}}
</script>
Vue-SimpleMDE
Vue.js的Markdown Editor组件。访问地址:Vue-SimpleMDE
<template><div><markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor></div>
</template><script>import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件export default {data: function(){return {content:'', // markdown编辑器内容configs: { // markdown编辑器配置参数status: false, // 禁用底部状态栏initialValue: 'Hello BBK', // 设置初始值renderingConfig: {codeSyntaxHighlighting: true, // 开启代码高亮highlightingTheme: 'atom-one-light' // 自定义代码高亮主题}}}},components: {markdownEditor // 声明组件markdownEditor}}
</script>
Vue-Core-Image-Upload
一款轻量级的vue上传插件,支持裁剪。访问地址:Vue-Core-Image-Upload
<template><div><img :src="src"> // 用于显示上传的图片<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']":crop="true" // 是否裁剪text="上传图片"url="" // 上传路径extensions="png,gif,jpeg,jpg" // 限制文件类型@:imageuploaded="imageuploaded"> // 监听图片上传完成事件</vue-core-image-upload></div>
</template><script>import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件export default {data: function(){return {src:'../img/1.jpg' // 默认显示图片地址}},components: {VueCoreImageUpload // 声明组件VueCoreImageUpload},methods:{imageuploaded(res) { // 定义上传完成执行的方法console.log(res)}}}
</script>
vue-schart
vue.js 封装 sChart.js 的图表组件。访问地址:vue-schart
<template><div><schart class="wrapper" canvasId="myCanvas" :options="options"></schart></div>
</template><script>import Schart from 'vue-schart'; // 导入Schart组件export default {data() {return {options: {type: 'bar',title: {text: '最近一周各品类销售图'},labels: ['周一', '周二', '周三', '周四', '周五'],datasets: [{label: '家电',data: [234, 278, 270, 190, 230]},{label: '百货',data: [164, 178, 190, 135, 160]},{label: '食品',data: [144, 198, 150, 235, 120]}]}};},components: {Schart}};
</script>
<style>.wrapper {width: 7rem;height: 5rem;}
</style>
其他注意事项
一、如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢?
举个栗子,我不想用 vue-datasource 这个组件,那我需要分四步走。
第一步:删除该组件的路由,在目录 src/router/index.js 中,找到引入改组件的路由,删除下面这段代码。
{path: '/vuetable',component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource组件
},
第二步:删除引入该组件的文件。在目录 src/components/page/ 删除 VueTable.vue 文件。
第三步:删除该页面的入口。在目录 src/components/common/Sidebar.vue 中,找到该入口,删除下面这段代码。
<el-menu-item index="vuetable">Vue表格组件</el-menu-item>
第四步:卸载该组件。执行以下命令:
npm un vue-datasource -S
完成。
二、如何切换主题色呢?
第一步:打开 src/main.js 文件,找到引入 element 样式的地方,换成浅绿色主题。
import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题
第二步:打开 src/App.vue 文件,找到 style 标签引入样式的地方,切换成浅绿色主题。
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
第三步:打开 src/components/common/Sidebar.vue 文件,找到 el-menu 标签,把 theme=“dark” 去掉即可。
vue-manage-system : Vue2 后台管理系统解决方案相关推荐
- 基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台、多租户
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台.多租户.支持MySQL/SQLServer/ ...
- java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署 本源码技术栈 ...
- java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档
java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档 java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档 本源码技术栈: 项目架构:B/S架构 开发语 ...
- 基于SpringBoot+VUE的宠物医院后台管理系统【源码开源】【建议收藏】
基于SpringBoot+VUE的宠物医院后台管理系统[源码开源][建议收藏] 今天给大家开源一个基于SpringBoot+VUE的宠物医院后台管理系统,系统基于脚手架工程,花了大概1周时间做出来的. ...
- 基于 vue + Element-ui 开发的后台管理系统
基于 vue + Element-ui 开发的后台管理系统 引文 思考 快速上手 项目结构介绍 引入 ElementUI 登录功能设计 项目演示地址:https://git.io/fp9UM 项目仓库 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 新B站视频来了!Spring security + vue前后端分离后台管理系统
距离上次发布视频已经很久了哈,有点懒.这次发布的是一个基于Spring security + jwt + vue的前后端分离后台管理系统VueAdmin,项目讲解视频一共54集,共800分钟,发布到B ...
- 【Vue 实战项目】后台管理系统登录页详解附源码
提示:前端查漏补缺,仅代表个人观点. 文章目录 一.先看效果图 二.实战步骤 1. 创建项目 2. 引入库 3. 登录页关键代码 三.页面源代码 总结 提示:项目源代码除了登录页面还有动态路由 一.先 ...
- Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统
2021-03-30更新:<Vue3教程:Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦> 最近在开发一个 Vue 3.0 + element plus ...
- SpringBoot + Vue + ElementUI 开发的后台管理系统
项目介绍 一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...
最新文章
- python冒泡排序
- 如何使用adb命令发送keyevent
- 状态机思路在程序设计中的应用
- 7.2-5 usermod
- php论坛有哪些_建网站的软件哪个好?建网站的软件有哪些?
- mysql中的函数编程_MySQL
- [UE4]导入 PSD 文件失败的解决办法:输出为 PNG,将 PNG 再保存为 PSD 导入
- [深度学习-实践]Transformer模型训练IMDB-tensorflow2 keras
- PHP错误:Warning: preg_replace() [function.preg-replace]: Unknown modifier '[' in
- 计算机与操作系统发展阶段 深谈:Linux操作系统
- R语言读取淘宝的单品页的名称和价格
- HBuilder Android APP打包发布
- kettle的行转列主键用法详解(正规化 宽表到窄表的过程)
- 微信支付之获取code
- HTML5小试 双人贪吃蛇
- python Pystaller 将python文件打包成exe
- jQuery类似QQ空间时间轴效果_事件展示时光轴js特效代码
- 敬业签桌面便签软件:该openid已被使用,无法绑定!(适用QQ微信互联登录解绑)
- 还在担心零基础绘画?这篇文章让你少走弯路!
- 一文简述BSD,System V ,POSIX,SUS版本历史, 以及glibc移植的特性测试宏
热门文章
- 模仿支付宝支付成功特效:svg圆圈转动+打钩
- Linux添加路由的方法
- 华为社招三面面经分享,现已拿到offer,定级D4对标17级
- python函数写法_python函数的写法和调用
- 压缩文件不记得密码了怎么办?
- XML文件详解以及解析
- 计算机中丢失audiodsp,AudioDsp.dll(缺失AudioDsp.dll文件修复工具)V1.0 免费版
- ES 搜索19 (match 查询时权重提升)
- 【有料c++题目周刊 | 第一期】希腊诸神
- 国土防线2计算机内存不足,国土防线2革命配置要求高吗?PC配置要求介绍