March 2019

To be honest, I haven't seen the API after using Vue for such a long time. I found it by accident these days Vue.directive It's a good look

It's always used here Vue.use(ElementUi) Where to use Vue.use(axios) , has been staying at the level of usage. Just in time, I found that the consumption of writing markdown parsing instance seems to be a little high, and it may be more convenient to directly process it into instructions (it is really much more convenient, and there is less writing of a bunch of methods)

Briefly describe the process

During the mount life cycle of the component rendering an article, it will query whether there is a corresponding article in the local record. If it does not exist, it will request online search, otherwise 404.
This article is about markdown, considering that the front-end processing can be directly parsed out (after all, the front-end performance is over 233), reducing the back-end logical processing burden, and what consistency is not needed to be considered now.
Use the downmark parser marked The logic is as follows

 //Import Vue from 'Vue' / import app 'import markdown from'. / markdown ';; / / inject markdown parser into markdown parser Vue. Use (markdown. Install) Vue. Prototype. Prototype. $marker = markdown. Markdown = markdown.marker 
 new Vue ({store, 
 router, 
 render: H = > H (APP) 
 H (APP) 
 Vue. Use (markdown. Install) vue.prototype. $markd = markdown.markdown.marker = markdown.markdown 
 new Vue ({store, 
 router, 
 render: H = > H (APP) (APP) 
 H (APP) 
 H (APP) 
 H (app) 
 $mount (' ා app ')

Integrated marked and exposed as plug-ins

 //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,
}

Use on label v-markdown instructions

 //This is an interface for finding articles = function() {return new promise ((resolve, reject) = > {resolve (ID)})}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} 
export default {Name: "test", 
 data() { Return {article: ', 
 isnotfound: true, 
}}, 
 methods: {handlerarticle (ID) {
 / / find local article 
 let a = this. Findarticle (ID, async (ID) = > {return away this is an interface (ID); 
})              if (a == null) {
                    return 404;
                }

                return a;
            },
            findArticle(id, callback) {
                // let res = '## Test';
                let res = null;
                if (res === null) {
                    return callback(id); Use {this "} to find {this"} to find the error; this. Article = a; / / save the markdown content to the variable 
}} 
 < / script > directly

For complete code, refer to: https://gist.github.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7