diff --git a/README.md b/README.md index 3a6af64..6e0480f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# vue-manage-system # +# vue-manage-system + vue @@ -15,56 +16,61 @@ donate -基于Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/) +基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/) -本项目基于vue-cli3构建，如果是vue-cli2的请下载[旧版本V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0) +本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0) > 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) ![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg) -## 前言 ## -之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。 +## 前言 -该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。 -（已经升级到 vue-cli@3.2.3，请更新依赖） +该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（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] 国际化 +## 功能 + +- [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 // 进入模板目录 @@ -76,57 +82,57 @@ npm run serve // 执行构建命令，生成的dist文件夹放在服务器下即可访问 npm run build ``` -## 组件使用说明与演示 ## -### vue-schart ### -vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart) +## 组件使用说明与演示 + +### vue-schart + +vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart) +

Downloads

```html - + ``` -## 其他注意事项 ## -### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ### +## 其他注意事项 + +### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ 举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。 @@ -136,14 +142,14 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu { // 富文本编辑器组件 path: '/editor', - component: resolve => require(['../components/page/VueEditor.vue'], resolve) + component: resolve => require(['../components/page/VueEditor.vue'], resolve) }, ``` 第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。 第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。 - + ```js { index: 'editor', @@ -152,30 +158,29 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu ``` 第四步：卸载该组件。执行以下命令： - - npm un vue-quill-editor -S +npm un vue-quill-editor -S 完成。 -### 二、如何切换主题色呢？ ### +### 二、如何切换主题色呢？ 第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。 ```javascript -import 'element-ui/lib/theme-default/index.css'; // 默认主题 -// import '../static/css/theme-green/index.css'; // 浅绿色主题 +import 'element-ui/lib/theme-default/index.css'; // 默认主题 +// import './assets/css/theme-green/index.css'; // 浅绿色主题 ``` 第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。 ```javascript -@import "../static/css/main.css"; -@import "../static/css/color-dark.css"; /*深色主题*/ -/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/ +@import "./assets/css/main.css"; +@import "./assets/css/color-dark.css"; /*深色主题*/ +/*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/ ``` 第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。 ## License -[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) \ No newline at end of file +[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) diff --git a/package.json b/package.json index 50fe0fc..fe19de9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-manage-system", - "version": "4.0.1", + "version": "4.1.0", "private": true, "scripts": { "dev": "npm run serve", @@ -16,13 +16,13 @@ "vue-cropperjs": "^3.0.0", "vue-i18n": "^8.10.0", "vue-quill-editor": "^3.0.6", - "vue-router": "^3.0.1", + "vue-router": "^3.0.3", "vue-schart": "^1.0.0", "vuedraggable": "^2.17.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "^3.2.0", - "@vue/cli-service": "^3.2.0", - "vue-template-compiler": "^2.5.21" + "@vue/cli-plugin-babel": "^3.9.0", + "@vue/cli-service": "^3.9.0", + "vue-template-compiler": "^2.6.10" } } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 7a7e97d..171d0cf 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,6 @@ import Vue from 'vue'; import App from './App.vue'; import router from './router'; -import axios from 'axios'; import ElementUI from 'element-ui'; import VueI18n from 'vue-i18n'; import { messages } from './components/common/i18n'; @@ -16,7 +15,9 @@ Vue.use(VueI18n); Vue.use(ElementUI, { size: 'small' }); -Vue.prototype.$axios = axios; +Vue.use(wysiwyg, { + maxHeight: '600px' +}); const i18n = new VueI18n({ locale: 'zh', @@ -25,6 +26,7 @@ const i18n = new VueI18n({ //使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { + document.title = `${to.meta.title} | vue-manage-system`; const role = localStorage.getItem('ms_username'); if (!role && to.path !== '/login') { next('/login'); diff --git a/src/router/index.js b/src/router/index.js index 4186f97..109a986 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -11,106 +11,106 @@ export default new Router({ }, { path: '/', - component: resolve => require(['../components/common/Home.vue'], resolve), + component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'), meta: { title: '自述文件' }, - children:[ + children: [ { path: '/dashboard', - component: resolve => require(['../components/page/Dashboard.vue'], resolve), + component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Dashboard.vue'), meta: { title: '系统首页' } }, { path: '/icon', - component: resolve => require(['../components/page/Icon.vue'], resolve), + component: () => import(/* webpackChunkName: "icon" */ '../components/page/Icon.vue'), meta: { title: '自定义图标' } }, { path: '/table', - component: resolve => require(['../components/page/BaseTable.vue'], resolve), + component: () => import(/* webpackChunkName: "table" */ '../components/page/BaseTable.vue'), meta: { title: '基础表格' } }, { path: '/tabs', - component: resolve => require(['../components/page/Tabs.vue'], resolve), + component: () => import(/* webpackChunkName: "tabs" */ '../components/page/Tabs.vue'), meta: { title: 'tab选项卡' } }, { path: '/form', - component: resolve => require(['../components/page/BaseForm.vue'], resolve), + component: () => import(/* webpackChunkName: "form" */ '../components/page/BaseForm.vue'), meta: { title: '基本表单' } }, { // 富文本编辑器组件 path: '/editor', - component: resolve => require(['../components/page/VueEditor.vue'], resolve), + component: () => import(/* webpackChunkName: "editor" */ '../components/page/VueEditor.vue'), meta: { title: '富文本编辑器' } }, { // markdown组件 path: '/markdown', - component: resolve => require(['../components/page/Markdown.vue'], resolve), - meta: { title: 'markdown编辑器' } + component: () => import(/* webpackChunkName: "markdown" */ '../components/page/Markdown.vue'), + meta: { title: 'markdown编辑器' } }, { // 图片上传组件 path: '/upload', - component: resolve => require(['../components/page/Upload.vue'], resolve), - meta: { title: '文件上传' } + component: () => import(/* webpackChunkName: "upload" */ '../components/page/Upload.vue'), + meta: { title: '文件上传' } }, { // vue-schart组件 path: '/charts', - component: resolve => require(['../components/page/BaseCharts.vue'], resolve), + component: () => import(/* webpackChunkName: "chart" */ '../components/page/BaseCharts.vue'), meta: { title: 'schart图表' } }, { // 拖拽列表组件 path: '/drag', - component: resolve => require(['../components/page/DragList.vue'], resolve), + component: () => import(/* webpackChunkName: "drag" */ '../components/page/DragList.vue'), meta: { title: '拖拽列表' } }, { // 拖拽Dialog组件 path: '/dialog', - component: resolve => require(['../components/page/DragDialog.vue'], resolve), + component: () => import(/* webpackChunkName: "dragdialog" */ '../components/page/DragDialog.vue'), meta: { title: '拖拽弹框' } }, { // 国际化组件 path: '/i18n', - component: resolve => require(['../components/page/I18n.vue'], resolve), + component: () => import(/* webpackChunkName: "i18n" */ '../components/page/I18n.vue'), meta: { title: '国际化' } }, { // 权限页面 path: '/permission', - component: resolve => require(['../components/page/Permission.vue'], resolve), + component: () => import(/* webpackChunkName: "permission" */ '../components/page/Permission.vue'), meta: { title: '权限测试', permission: true } }, { path: '/404', - component: resolve => require(['../components/page/404.vue'], resolve), + component: () => import(/* webpackChunkName: "404" */ '../components/page/404.vue'), meta: { title: '404' } }, { path: '/403', - component: resolve => require(['../components/page/403.vue'], resolve), + component: () => import(/* webpackChunkName: "403" */ '../components/page/403.vue'), meta: { title: '403' } }, { path: '/donate', - component: resolve => require(['../components/page/Donate.vue'], resolve), + component: () => import(/* webpackChunkName: "donate" */ '../components/page/Donate.vue'), meta: { title: '支持作者' } } ] }, { path: '/login', - component: resolve => require(['../components/page/Login.vue'], resolve) + component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue') }, { path: '*', redirect: '/404' } ] -}) +});