github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #199 from lin-xin/dev 

更新旧代码和依赖
pull/217/head
林鑫 2019-08-17 16:00:57 +08:00 committed by GitHub
parent d45bdbeeda f7fb309680
commit 21efb45431
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 253 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
README.md
View File

@ -1,4 +1,5 @@
# vue-manage-system # # vue-manage-system
<a href="https://github.com/vuejs/vue"> <a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a> </a>
@ -15,56 +16,61 @@
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a> </a>
基于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) > 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) [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/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/wms1.png)
### 浅绿色皮肤 ### ### 浅绿色皮肤
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png) ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
## 赞赏 ## 赞赏
请作者喝杯咖啡吧！(微信号：linxin_20) 请作者喝杯咖啡吧！(微信号：linxin_20)
![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg) ![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
## 前言 ## ## 前言
之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
（已经升级到 vue-cli@3.2.3，请更新依赖）
## 功能 ## ## 功能
- [x] Element UI
- [x] 登录/注销 - [x] Element UI
- [x] Dashboard - [x] 登录/注销
- [x] 表格 - [x] Dashboard
- [x] Tab选项卡 - [x] 表格
- [x] 表单 - [x] Tab 选项卡
- [x] 图表 :bar_chart: - [x] 表单
- [x] 富文本编辑器 - [x] 图表 :bar_chart:
- [x] markdown编辑器 - [x] 富文本编辑器
- [x] 图片拖拽/裁剪上传 - [x] markdown 编辑器
- [x] 支持切换主题色 :sparkles: - [x] 图片拖拽/裁剪上传
- [x] 列表拖拽排序 - [x] 支持切换主题色 :sparkles:
- [x] 权限测试 - [x] 列表拖拽排序
- [x] 404 / 403 - [x] 权限测试
- [x] 三级菜单 - [x] 404 / 403
- [x] 自定义图标 - [x] 三级菜单
- [x] 可拖拽弹窗 - [x] 自定义图标
- [x] 国际化 - [x] 可拖拽弹窗
- [x] 国际化
## 安装步骤
## 安装步骤 ##
``` ```
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地 git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
cd vue-manage-system // 进入模板目录 cd vue-manage-system // 进入模板目录
@ -76,57 +82,57 @@ npm run serve
// 执行构建命令，生成的dist文件夹放在服务器下即可访问 // 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build 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)
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p> <p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
```html ```html
<template> <template>
<div> <div>
<schart class="wrapper" <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
:canvasId="canvasId"
:type="type"
:data="data"
:options="options"
></schart>
</div> </div>
</template> </template>
<script> <script>
import Schart from 'vue-schart'; // 导入Schart组件 import Schart from 'vue-schart'; // 导入Schart组件
export default { export default {
data: function(){ data: function() {
return { return {
canvasId: 'myCanvas', // canvas的id canvasId: 'myCanvas', // canvas的id
type: 'bar', // 图表类型 type: 'bar', // 图表类型
data: [ data: [
{name: '2014', value: 1342}, { name: '2014', value: 1342 },
{name: '2015', value: 2123}, { name: '2015', value: 2123 },
{name: '2016', value: 1654}, { name: '2016', value: 1654 },
{name: '2017', value: 1795}, { name: '2017', value: 1795 }
], ],
options: { // 图表可选参数 options: {
// 图表可选参数
title: 'Total sales of stores in recent years' title: 'Total sales of stores in recent years'
} }
} };
}, },
components: { components: {
Schart Schart
} }
} };
</script> </script>
<style> <style>
.wrapper{ .wrapper {
width: 7rem; width: 7rem;
height: 5rem; height: 5rem;
} }
</style> </style>
``` ```
## 其他注意事项 ## ## 其他注意事项
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。 举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
@ -136,14 +142,14 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
{ {
// 富文本编辑器组件 // 富文本编辑器组件
path: '/editor', 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/page/ 删除 VueEditor.vue 文件。
第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。 第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
```js ```js
{ {
index: 'editor', 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 样式的地方，换成浅绿色主题。 第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
```javascript ```javascript
import 'element-ui/lib/theme-default/index.css'; // 默认主题 import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题 // import './assets/css/theme-green/index.css'; // 浅绿色主题
``` ```
第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。 第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
```javascript ```javascript
@import "../static/css/main.css"; @import "./assets/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/ @import "./assets/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/ /*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/
``` ```
第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。 第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。
## License ## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) [MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

10
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-manage-system", "name": "vue-manage-system",
"version": "4.0.1", "version": "4.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "npm run serve", "dev": "npm run serve",
@ -16,13 +16,13 @@
"vue-cropperjs": "^3.0.0", "vue-cropperjs": "^3.0.0",
"vue-i18n": "^8.10.0", "vue-i18n": "^8.10.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.3",
"vue-schart": "^1.0.0", "vue-schart": "^1.0.0",
"vuedraggable": "^2.17.0" "vuedraggable": "^2.17.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0", "@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-service": "^3.2.0", "@vue/cli-service": "^3.9.0",
"vue-template-compiler": "^2.5.21" "vue-template-compiler": "^2.6.10"
} }
} }

BIN
screenshots/wms2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/assets/css/theme-green/fonts/element-icons.ttf
View File

Binary file not shown.

BIN
src/assets/css/theme-green/fonts/element-icons.woff
View File

Binary file not shown.

2
src/assets/css/theme-green/index.css
View File

File diff suppressed because one or more lines are too long

276
src/components/common/Header.vue
View File

@ -2,8 +2,8 @@
<div class="header"> <div class="header">
<!-- 折叠按钮 --> <!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage"> <div class="collapse-btn" @click="collapseChage">
<i v-if="!collapse" class="el-icon-s-fold"></i> <i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-if="collapse" class="el-icon-s-unfold"></i> <i v-else class="el-icon-s-unfold"></i>
</div> </div>
<div class="logo">后台管理系统</div> <div class="logo">后台管理系统</div>
<div class="header-right"> <div class="header-right">
@ -16,7 +16,11 @@
</div> </div>
<!-- 消息中心 --> <!-- 消息中心 -->
<div class="btn-bell"> <div class="btn-bell">
<el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom"> <el-tooltip
effect="dark"
:content="message?`有${message}条未读消息`:`消息中心`"
placement="bottom"
>
<router-link to="/tabs"> <router-link to="/tabs">
<i class="el-icon-bell"></i> <i class="el-icon-bell"></i>
</router-link> </router-link>
@ -24,11 +28,14 @@
<span class="btn-bell-badge" v-if="message"></span> <span class="btn-bell-badge" v-if="message"></span>
</div> </div>
<!-- 用户头像 --> <!-- 用户头像 -->
<div class="user-avator"><img src="../../assets/img/img.jpg"></div> <div class="user-avator">
<img src="../../assets/img/img.jpg" />
</div>
<!-- 用户名下拉菜单 --> <!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand"> <el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{username}} <i class="el-icon-caret-bottom"></i> {{username}}
<i class="el-icon-caret-bottom"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<a href="http://blog.gdfengshuo.com/about/" target="_blank"> <a href="http://blog.gdfengshuo.com/about/" target="_blank">
@ -37,7 +44,7 @@
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item> <el-dropdown-item>项目仓库</el-dropdown-item>
</a> </a>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
@ -45,142 +52,143 @@
</div> </div>
</template> </template>
<script> <script>
import bus from '../common/bus'; import bus from '../common/bus';
export default { export default {
data() { data() {
return { return {
collapse: false, collapse: false,
fullscreen: false, fullscreen: false,
name: 'linxin', name: 'linxin',
message: 2 message: 2
};
},
computed: {
username() {
let username = localStorage.getItem('ms_username');
return username ? username : this.name;
}
},
methods: {
// 用户名下拉菜单选择事件
handleCommand(command) {
if (command == 'loginout') {
localStorage.removeItem('ms_username');
this.$router.push('/login');
} }
}, },
computed:{ // 侧边栏折叠
username(){ collapseChage() {
let username = localStorage.getItem('ms_username'); this.collapse = !this.collapse;
return username ? username : this.name; bus.$emit('collapse', this.collapse);
}
}, },
methods:{ // 全屏事件
// 用户名下拉菜单选择事件 handleFullScreen() {
handleCommand(command) { let element = document.documentElement;
if(command == 'loginout'){ if (this.fullscreen) {
localStorage.removeItem('ms_username') if (document.exitFullscreen) {
this.$router.push('/login'); document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} }
}, } else {
// 侧边栏折叠 if (element.requestFullscreen) {
collapseChage(){ element.requestFullscreen();
this.collapse = !this.collapse; } else if (element.webkitRequestFullScreen) {
bus.$emit('collapse', this.collapse); element.webkitRequestFullScreen();
}, } else if (element.mozRequestFullScreen) {
// 全屏事件 element.mozRequestFullScreen();
handleFullScreen(){ } else if (element.msRequestFullscreen) {
let element = document.documentElement; // IE11
if (this.fullscreen) { element.msRequestFullscreen();
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
} }
this.fullscreen = !this.fullscreen;
}
},
mounted(){
if(document.body.clientWidth < 1500){
this.collapseChage();
} }
this.fullscreen = !this.fullscreen;
}
},
mounted() {
if (document.body.clientWidth < 1500) {
this.collapseChage();
} }
} }
};
</script> </script>
<style scoped> <style scoped>
.header { .header {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 70px; height: 70px;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
} }
.collapse-btn{ .collapse-btn {
float: left; float: left;
padding: 0 21px; padding: 0 21px;
cursor: pointer; cursor: pointer;
line-height: 70px; line-height: 70px;
} }
.header .logo{ .header .logo {
float: left; float: left;
width:250px; width: 250px;
line-height: 70px; line-height: 70px;
} }
.header-right{ .header-right {
float: right; float: right;
padding-right: 50px; padding-right: 50px;
} }
.header-user-con{ .header-user-con {
display: flex; display: flex;
height: 70px; height: 70px;
align-items: center; align-items: center;
} }
.btn-fullscreen{ .btn-fullscreen {
transform: rotate(45deg); transform: rotate(45deg);
margin-right: 5px; margin-right: 5px;
font-size: 24px; font-size: 24px;
} }
.btn-bell, .btn-fullscreen{ .btn-bell,
position: relative; .btn-fullscreen {
width: 30px; position: relative;
height: 30px; width: 30px;
text-align: center; height: 30px;
border-radius: 15px; text-align: center;
cursor: pointer; border-radius: 15px;
} cursor: pointer;
.btn-bell-badge{ }
position: absolute; .btn-bell-badge {
right: 0; position: absolute;
top: -2px; right: 0;
width: 8px; top: -2px;
height: 8px; width: 8px;
border-radius: 4px; height: 8px;
background: #f56c6c; border-radius: 4px;
color: #fff; background: #f56c6c;
} color: #fff;
.btn-bell .el-icon-bell{ }
color: #fff; .btn-bell .el-icon-bell {
} color: #fff;
.user-name{ }
margin-left: 10px; .user-name {
} margin-left: 10px;
.user-avator{ }
margin-left: 20px; .user-avator {
} margin-left: 20px;
.user-avator img{ }
display: block; .user-avator img {
width:40px; display: block;
height:40px; width: 40px;
border-radius: 50%; height: 40px;
} border-radius: 50%;
.el-dropdown-link{ }
color: #fff; .el-dropdown-link {
cursor: pointer; color: #fff;
} cursor: pointer;
.el-dropdown-menu__item{ }
text-align: center; .el-dropdown-menu__item {
} text-align: center;
}
</style> </style>

23
src/main.js
View File

@ -1,30 +1,28 @@
import Vue from 'vue' import Vue from 'vue';
import App from './App.vue' import App from './App.vue';
import router from './router' import router from './router';
import axios from 'axios';
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import { messages } from './components/common/i18n'; import { messages } from './components/common/i18n';
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题 import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题 // import './assets/css/theme-green/index.css'; // 浅绿色主题
import './assets/css/icon.css'; import './assets/css/icon.css';
import './components/common/directives'; import './components/common/directives';
import "babel-polyfill"; import 'babel-polyfill';
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(VueI18n); Vue.use(VueI18n);
Vue.use(ElementUI, { Vue.use(ElementUI, {
size: 'small' size: 'small'
}); });
Vue.prototype.$axios = axios;
const i18n = new VueI18n({ const i18n = new VueI18n({
locale: 'zh', locale: 'zh',
messages messages
}) });
//使用钩子函数对路由进行权限跳转 //使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | vue-manage-system`;
const role = localStorage.getItem('ms_username'); const role = localStorage.getItem('ms_username');
if (!role && to.path !== '/login') { if (!role && to.path !== '/login') {
next('/login'); next('/login');
@ -41,11 +39,10 @@ router.beforeEach((to, from, next) => {
next(); next();
} }
} }
}) });
new Vue({ new Vue({
router, router,
i18n, i18n,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app');

44
src/router/index.js
View File

@ -11,106 +11,106 @@ export default new Router({
}, },
{ {
path: '/', path: '/',
component: resolve => require(['../components/common/Home.vue'], resolve), component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
meta: { title: '自述文件' }, meta: { title: '自述文件' },
children:[ children: [
{ {
path: '/dashboard', path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve), component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Dashboard.vue'),
meta: { title: '系统首页' } meta: { title: '系统首页' }
}, },
{ {
path: '/icon', path: '/icon',
component: resolve => require(['../components/page/Icon.vue'], resolve), component: () => import(/* webpackChunkName: "icon" */ '../components/page/Icon.vue'),
meta: { title: '自定义图标' } meta: { title: '自定义图标' }
}, },
{ {
path: '/table', path: '/table',
component: resolve => require(['../components/page/BaseTable.vue'], resolve), component: () => import(/* webpackChunkName: "table" */ '../components/page/BaseTable.vue'),
meta: { title: '基础表格' } meta: { title: '基础表格' }
}, },
{ {
path: '/tabs', path: '/tabs',
component: resolve => require(['../components/page/Tabs.vue'], resolve), component: () => import(/* webpackChunkName: "tabs" */ '../components/page/Tabs.vue'),
meta: { title: 'tab选项卡' } meta: { title: 'tab选项卡' }
}, },
{ {
path: '/form', path: '/form',
component: resolve => require(['../components/page/BaseForm.vue'], resolve), component: () => import(/* webpackChunkName: "form" */ '../components/page/BaseForm.vue'),
meta: { title: '基本表单' } meta: { title: '基本表单' }
}, },
{ {
// 富文本编辑器组件 // 富文本编辑器组件
path: '/editor', path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve), component: () => import(/* webpackChunkName: "editor" */ '../components/page/VueEditor.vue'),
meta: { title: '富文本编辑器' } meta: { title: '富文本编辑器' }
}, },
{ {
// markdown组件 // markdown组件
path: '/markdown', path: '/markdown',
component: resolve => require(['../components/page/Markdown.vue'], resolve), component: () => import(/* webpackChunkName: "markdown" */ '../components/page/Markdown.vue'),
meta: { title: 'markdown编辑器' } meta: { title: 'markdown编辑器' }
}, },
{ {
// 图片上传组件 // 图片上传组件
path: '/upload', path: '/upload',
component: resolve => require(['../components/page/Upload.vue'], resolve), component: () => import(/* webpackChunkName: "upload" */ '../components/page/Upload.vue'),
meta: { title: '文件上传' } meta: { title: '文件上传' }
}, },
{ {
// vue-schart组件 // vue-schart组件
path: '/charts', path: '/charts',
component: resolve => require(['../components/page/BaseCharts.vue'], resolve), component: () => import(/* webpackChunkName: "chart" */ '../components/page/BaseCharts.vue'),
meta: { title: 'schart图表' } meta: { title: 'schart图表' }
}, },
{ {
// 拖拽列表组件 // 拖拽列表组件
path: '/drag', path: '/drag',
component: resolve => require(['../components/page/DragList.vue'], resolve), component: () => import(/* webpackChunkName: "drag" */ '../components/page/DragList.vue'),
meta: { title: '拖拽列表' } meta: { title: '拖拽列表' }
}, },
{ {
// 拖拽Dialog组件 // 拖拽Dialog组件
path: '/dialog', path: '/dialog',
component: resolve => require(['../components/page/DragDialog.vue'], resolve), component: () => import(/* webpackChunkName: "dragdialog" */ '../components/page/DragDialog.vue'),
meta: { title: '拖拽弹框' } meta: { title: '拖拽弹框' }
}, },
{ {
// 国际化组件 // 国际化组件
path: '/i18n', path: '/i18n',
component: resolve => require(['../components/page/I18n.vue'], resolve), component: () => import(/* webpackChunkName: "i18n" */ '../components/page/I18n.vue'),
meta: { title: '国际化' } meta: { title: '国际化' }
}, },
{ {
// 权限页面 // 权限页面
path: '/permission', path: '/permission',
component: resolve => require(['../components/page/Permission.vue'], resolve), component: () => import(/* webpackChunkName: "permission" */ '../components/page/Permission.vue'),
meta: { title: '权限测试', permission: true } meta: { title: '权限测试', permission: true }
}, },
{ {
path: '/404', path: '/404',
component: resolve => require(['../components/page/404.vue'], resolve), component: () => import(/* webpackChunkName: "404" */ '../components/page/404.vue'),
meta: { title: '404' } meta: { title: '404' }
}, },
{ {
path: '/403', path: '/403',
component: resolve => require(['../components/page/403.vue'], resolve), component: () => import(/* webpackChunkName: "403" */ '../components/page/403.vue'),
meta: { title: '403' } meta: { title: '403' }
}, },
{ {
path: '/donate', path: '/donate',
component: resolve => require(['../components/page/Donate.vue'], resolve), component: () => import(/* webpackChunkName: "donate" */ '../components/page/Donate.vue'),
meta: { title: '支持作者' } meta: { title: '支持作者' }
} }
] ]
}, },
{ {
path: '/login', path: '/login',
component: resolve => require(['../components/page/Login.vue'], resolve) component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue')
}, },
{ {
path: '*', path: '*',
redirect: '/404' redirect: '/404'
} }
] ]
}) });