基于Vue2.6 + iView4.5.0的后台管理系统解决方案示例.
目前实现的功能及用到的组件
- Vue
- 页面: iView4.5.0
- 文章列表、文章分类
- 富文本框: quillEditor
文件上传: 使用iView自带的文件上传组件
项目地址使用
git https://github.com/shanyanwt/koa_vue_blog.git npm install // 安装依赖 npm run dev // 本地开发 npm run build // 生产部署
目录结构
.
└─src
│ App.vue //入口文件
│ main.js
│
├─api //api接口配置目录
│
├─common //工具类
│
├─components //组件目录
│
├─error //错误页面
│
├─filter //过滤器
│
├─router //路由文件
│ index.js
│
├─static //静态文件
│
└─view
│ main.vue //主入口文件
│
├─article
│ details.vue //文章详情
│ history.vue //项目历史记录
│ postedit.vue //编辑文章
│ tools.vue //推荐小工具
│
├─index //首页
│ index.vue
│
├─search //搜索页
│ search.vue
│
└─test //测试目录
路由配置
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [{
path: '/',
component: resolve => require(['../view/main.vue'], resolve),
children: [ {
path: '/',
name:'index',
component: resolve => require(['../view/index/index.vue'], resolve)
},{
path: '/article/:id(\\d+)',
component: resolve => require(['../view/article/details.vue'], resolve)
},
{
path: '/404',
component: resolve => require(['../error/404.vue'], resolve)
},
]
},
{
/*404页面*/
path: '*',
redirect: '/404'
}
]
})
客户端添加的文章默认是普通文章,需要管理端审核后才可以查看相应的内容
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。