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, 
 render: H = > H (APP) 
 H (APP) 
 Vue. Use (markdown. Install) vue.prototype. $markd = markdown.markdown.marker = markdown.markdown 
 new Vue ({store, 
 render: H = > H (APP) (APP) 
 H (APP) 
 H (APP) 
 H (app) 
 $mount (' ා app ')

Integrated marked and exposed as plug-ins


import marked from 'marked'

    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 {

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: