渲染文章的组件在挂载的生命周期中，会查询本地记录中是否存在对应的文章，不存在就发起请求线上查找，否则404。

文章为markdown内容，考虑让前端处理直接解析出来(毕竟前端性能过剩233)，减少后端逻辑处理负担，一致性什么现在是不需要考虑的。

markdown解析器就用marked，完成逻辑如下

//main.js

import Vue from 'vue'

import App from './App'

import markdown from './markdown';

//注入markdown解析器

Vue.use(markdown.install)

Vue.prototype.$marked = markdown.marked

new Vue({

    store,

    router,

    render: h => h(App)

}).$mount('#app')

集成marked制成插件形式暴露

//markdown.js

import marked from 'marked'

import('highlight.js/styles/atom-one-dark.css')

marked.setOptions({

    renderer: new marked.Renderer(),

    pedantic: false,

    gfm: true,

    tables: true,

    breaks: false,

    sanitize: false,

    smartLists: true,

    smartypants: false,

    xhtml: false,

    highlight(code) {

        return require('highlight.js').highlightAuto(code).value;

    },

})

let install = (Vue) => {

    if (install.installed) return;

    Vue.directive('markdown', {

        bind: (el, binding, vnode) => {

            el.innerHTML = marked(binding.value)

        },

        update: (el, binding, vnode) => {

            el.innerHTML = marked(binding.value)

        }

    })

}

export default {

    marked,

    install,

}

在标签上使用v-markdown指令

//Test.vue

完整代码参阅: /flxxyz/93e009d32ecd7e0c6785a52571577cd7