上传封面
+只能上传jpg/png文件
+课程封面图将按2:1显示,最佳分辨率1400*700
+commit 4fa16e2fd65d0a06a9b2bdf35720d499b613ba68 Author: yujialong <479214531@qq.com> Date: Fri Apr 16 10:22:47 2021 +0800 initial diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..9dee646 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not ie <= 8 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1c3aae3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +.DS_Store +node_modules +/dist +example.html +favicon.ico +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw* diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..c5f454b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "tabWidth": 4, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 140 +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1ef7d3e --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2016-2019 vue-manage-system + +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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..672b720 --- /dev/null +++ b/README.md @@ -0,0 +1,197 @@ +# vue-manage-system + + + + + + + + + + + + + + + + + +基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/) + +> React + Ant Design 的版本正在开发中,仓库地址:[react-manage-system](https://github.com/lin-xin/react-manage-system) + +[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md) + +## 项目截图 + +### 登录 + +![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png) + +### 默认皮肤 + +![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png) + +### 浅绿色皮肤 + +![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png) + +## 赞赏 + +请作者喝杯咖啡吧!(微信号:linxin_20) + +![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg) + +## 特别鸣谢 + +- [实验楼](https://www.shiyanlou.com?source=vue-manage-system) + +## 前言 + +该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 vue.js,使用 vue-cli3 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。 + +## 功能 + +- [x] Element UI +- [x] 登录/注销 +- [x] Dashboard +- [x] 表格 +- [x] Tab 选项卡 +- [x] 表单 +- [x] 图表 :bar_chart: +- [x] 富文本编辑器 +- [x] markdown 编辑器 +- [x] 图片拖拽/裁剪上传 +- [x] 支持切换主题色 :sparkles: +- [x] 列表拖拽排序 +- [x] 权限测试 +- [x] 404 / 403 +- [x] 三级菜单 +- [x] 自定义图标 +- [x] 可拖拽弹窗 +- [x] 国际化 + +## 安装步骤 + +``` +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](https://github.com/linxin/vue-schart) + +
+ +```html + ++ + {{currentPage}} / {{pageCount}} + +
+上传封面
+只能上传jpg/png文件
+课程封面图将按2:1显示,最佳分辨率1400*700
+上传封面
+上传封面
+展示宽度为220,高度140,JPG/PNG/GIF,3MB以内
+上传封面
+展示宽度为1920,高度300,JPG/PNG/GIF,3MB以内
+运营与管理
+电竞赛事运营与管理仿真实训系统
+编导
+电竞赛事编导仿真实训系统
+主持与解说
+电竞赛事主持与解说仿真实训系统
+数据分析
+电竞数据分析仿真实训系统
+品牌与运营
+电竞品牌运营与管理仿真实训系统
++ + {{currentPage}} / {{pageCount}} + +
+{{$t('i18n.p1')}}
+{{$t('i18n.p2')}}
+{{$t('i18n.p3')}}
++ 直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如:(共{{iconList.length}}个图标) +
++ + <i class="el-icon-lx-redpacket_fill"></i> +
++ + <i class="el-icon-lx-weibo"></i> +
++ + <i class="el-icon-lx-emojifill"></i> +
+上传封面
+展示宽度为220,高度140,JPG/PNG/GIF,3MB以内
+上传封面
+展示宽度为1920,高度300,JPG/PNG/GIF,3MB以内
+Unicode 是字体在网页端最原始的应用方式,特点是:
+++注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
+
Unicode 使用步骤如下:
+@font-face
@font-face {
+ font-family: 'iconfont';
+ src: url('iconfont.eot');
+ src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+ url('iconfont.woff2') format('woff2'),
+ url('iconfont.woff') format('woff'),
+ url('iconfont.ttf') format('truetype'),
+ url('iconfont.svg#iconfont') format('svg');
+}
+
+ .iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+
+<span class="iconfont">3</span>
+
+ ++"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
+
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
+与 Unicode 使用方式相比,具有如下特点:
+使用步骤如下:
+<link rel="stylesheet" href="./iconfont.css">
+
+ <span class="iconfont icon-xxx"></span>
+
+ ++" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
+
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
+font-size
, color
来调整样式。使用步骤如下:
+<script src="./iconfont.js"></script>
+
+ <style>
+.icon {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+}
+</style>
+
+ <svg class="icon" aria-hidden="true">
+ <use xlink:href="#icon-xxx"></use>
+</svg>
+
+