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

Recommended Today

Python implements crawler data stored in MongoDB

In the above two articles have been introduced to Python crawler and mongo, so here I will data storage to directing a crawler to climb down, the first to introduce we are going to crawl sites, readfree website, this website is very good, we just need to sign in can be downloaded for free every […]