2 Star 1 Fork 1

oumingyuan / inventory-management

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

inventory-management

vue element-ui license GitHub release donate

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

(本项目基于vue-cli3构建,如果是vue-cli2的请下载旧版本V3.2.0)

English document

项目截图

登录

Image text

默认皮肤

Image text

浅绿色皮肤

Image text

赞赏

请作者喝杯咖啡吧!(微信号: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选项卡
  • 表单
  • 图表 :bar_chart:
  • 富文本编辑器
  • markdown编辑器
  • 图片拖拽/裁剪上传
  • 支持切换主题色 :sparkles:
  • 列表拖拽排序
  • 权限测试
  • 404 / 403
  • 三级菜单
  • 自定义图标
  • 可拖拽弹窗
  • 国际化

安装步骤

git clone https://github.com/lin-xin/inventory-management.git      // 把模板下载到本地
cd inventory-management    // 进入模板目录
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>

其他注意事项

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

举个栗子,我不想用 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 属性去掉即可。

License

MIT

MIT License Copyright (c) 2016 inventory-management Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

库存管理系统 展开 收起
JavaScript
MIT
取消

发行版 (1)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/oumingyuan/inventory-management.git
git@gitee.com:oumingyuan/inventory-management.git
oumingyuan
inventory-management
inventory-management
master

搜索帮助