Skip to content
The web management system solution based on Vue2 and Element UI.
Branch: master
Clone or download
Pull request Compare This branch is 14 commits behind lin-xin:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
screenshots
src
.browserslistrc
.gitignore
README.md
README_EN.md
babel.config.js
favicon.ico
package-lock.json
package.json
postcss.config.js
vue.config.js

README.md

vue-manage-system

基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。线上地址

English document

更新日志

赞赏

请作者喝杯咖啡吧!(微信号:linxin_20)

微信扫一扫

前言

之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。从寻找组件,到使用组件的过程中,遇到了很多问题,也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验,总结成这个后台管理系统解决方案。

该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。 (已经升级到 vue-cli@3.2.3,请更新依赖)

功能

  • Element UI
  • 登录/注销
  • Dashboard
  • 表格
  • Tab选项卡
  • 表单
  • 图表 📊
  • 富文本编辑器
  • markdown编辑器
  • 图片拖拽/裁剪上传
  • 支持切换主题色
  • 列表拖拽排序
  • 权限测试
  • 404 / 403
  • 三级菜单
  • 自定义图标
  • 可拖拽弹窗

安装步骤

git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
cd vue-manage-system    // 进入模板目录
npm install         // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn

本地开发

// 开启服务器,浏览器访问 http://localhost:8080
npm run serve

构建生产

// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build

组件使用说明与演示

vue-schart

vue.js封装sChart.js的图表组件。访问地址:vue-schart

Downloads

<template>
    <div>
        <schart  class="wrapper"
				:canvasId="canvasId"
				:type="type"
				: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',                // 图表类型
                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>
<style>
.wrapper{
	width: 7rem;
	height: 5rem;
}
</style>

element-ui

一套基于vue.js2.0的桌面组件库。访问地址:element

Vue-Quill-Editor

基于Quill、适用于Vue2的富文本编辑器。访问地址:vue-quill-editor

(IE10及以下不支持)

mavonEditor

基于Vue的markdown编辑器。访问地址:mavonEditor

vue-cropperjs

一个封装了 cropperjs 的 Vue 组件,用于裁剪图片。访问地址:vue-cropperjs

其他注意事项

一、如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢?

举个栗子,我不想用 Vue-Quill-Editor 这个组件,那我需要分四步走。

第一步:删除该组件的路由,在目录 src/router/index.js 中,找到引入改组件的路由,删除下面这段代码。

{
    // 富文本编辑器组件
    path: '/editor',
    component: resolve => require(['../components/page/VueEditor.vue'], resolve) 
},

第二步:删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。

第三步:删除该页面的入口。在目录 src/components/common/Sidebar.vue 中,找到该入口,删除下面这段代码。

{
	index: 'editor',
	title: '富文本编辑器'
},

第四步:卸载该组件。执行以下命令:

npm un vue-quill-editor -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 标签,把 background-color/text-color/active-text-color 属性去掉即可。

项目截图

默认皮肤

Image text

浅绿色皮肤

Image text

You can’t perform that action at this time.