Vue + iView blog, Vue (SPA) single page, rich text compiler

Time:2019-10-10

An example of background management system solution based on Vue2 + iView2.0.

Functions and components currently implemented

  • Vue
  • Page: iView2.0
  • List of articles, classification of articles
  • Rich text box: quill Editor
  • File upload: Using the file upload component that comes with iView

Project address

Use

git https://github.com/shanyanwt/koa_vue_blog.git
NPM install // installation dependency
NPM run dev // local development
NPM run build // production deployment

directory structure

.
-build//Build configuration directory
│
-config//Configure directory port
│
└─src
    App.vue//entry file
    │  main.js                          
    │
    ├ - API // API interface configuration directory
    │
    -common//Tool class
    │
    -components//component directory
    │
    -error//error page
    │
    -filter//filter
    │
    -router//routing file
    │      index.js
    │
    -static//static file
    │
    └─view                           
        Main.vue//main entry file
        │
        ├─article                             
        Details. Vue // article details
        History.vue//project history
        Postedit.vue//Edit articles
        Tools.vue//Recommendation gadget
        │
        -index//home page
        │      index.vue
        │
        -search//search page
        │      search.vue
        │
        -test//test directory

Routing configuration

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 pages*/
            path: '*',
            redirect: '/404'
        }
    ]
})

By default, the articles added by the client are ordinary articles, which need to be audited by the management side before the corresponding contents can be viewed.

I am a lonely wolf… welcome star