March 2019

To tell you the truth, I haven't seen API for such a long time. Vue rediscovered my blog these days. Vue.directive It looks great.

Always see here. Vue.use (ElementUi) Where to use Vue.use (Axios) It has always been at the level of application, and I find that the consumption of markdown parsing examples is a little too large. It may be a lot easier to process directives directly.

Describe the process briefly.

The components that render the article will query whether there is a corresponding article in the local record during the lifecycle of the installation. If there is no request, the request will be searched online, otherwise 404.
The article is for the content of markdown, considering that front-end processing can be directly resolved (after all, the front-end performance is over 233), so as to reduce the burden of logical processing on the back end and consistency.
The markdown parser is used. Marked The completion logic is as follows

 / / Main.js

 Import Vue from'vue'
import App from'./App'
import markdown from'./markdown'; Vue.use ( Markdown.install ) Vue.prototype .$marked = Markdown.marked

 New Vue ({
store, 
router, 
render: H = > H (App)}.$mount ('#app')

Integrated marked makes plug-in form exposure

 / / 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, 
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 labels V-markdown instructions

 / / Test.vue

 <template>
<div>
<div v-if= "isNotFound" >404</div>
<div v-else v-markdown= "article" ></div>
</div>
</template>

<script>
const, which is an interface for finding articles = function () {
return new new ((*, V) = > > (}})} Return {
article: ', 
isNotFound: true, {}}, 
methods: {
handlerArticle (ID) {} / find local article 
let a = This.findArticle (ID, async (ID) = > {
return await. This is an interface for finding articles (ID); If (a = = null) {
return 404; 
}

return a; {}, 
findArticle (ID, callback) {/ / let res = = "{}};" = = ";" (= = = =) "; 
}

return res; {}}, 
mounted () {/ / ID to find articles 
let a = This.handlerArticle (123); 

if (a = = = 404) {/ / jump to error page}} / / processing loading
 This.isNotFound = false; A kind of This.article = a; / / save markdown content directly to variable 
}
}
</script>

Complete code is read: Https://gist.github.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7