基于Vue2 + iView2.0的后台管理系统解决方案示例.

目前实现的功能及用到的组件

• Vue
• 页面： iView2.0
• 文章列表、文章分类
• 富文本框： quillEditor
• 文件上传： 使用iView自带的文件上传组件

项目地址

使用

git https://github.com/shanyanwt/koa_vue_blog.git
npm install         // 安装依赖
npm run dev         // 本地开发
npm run build       // 生产部署

目录结构

.
├─build                             //构建配置目录
│
├─config                            //配置目录端口
│
└─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'
        }
    ]
})

客户端添加的文章默认是普通文章，需要管理端审核后才可以查看相应的内容

我是一只孤独的狼……欢迎star