Converting Markdown to Vue single-file component loader for Webpack.
- node >= 6.0.0
- npm >= 3.0.0
- webpack >= 2.0.0
- output es6 module
npm i vue-markdown-es6-loader
{
module: {
rules: [{
test: /\.vue\.md$/,
use: [{
loader: 'vue-loader',
options: {
js: 'babel-loader' // output es6 module
}
}, {
loader: 'vue-markdown-es6-loader',
options: {
prefix: '<div>',
postfix: '</div>',
highlightStyle: 'default'
}
}]
}]
}
}
-
Type: string
-
Default:
<div>
-
Details:
Element tag of output start.
Vue warn: Component template should contain exactly one root element
-
Type: string
-
Default:
</div>
-
Details:
Element tag of output end.
Vue warn: Component template should contain exactly one root element
-
Type: string
-
Default:
default
-
Optional: refer to style filename
-
Details:
highlight.js
style. -
markedOptions
-
Type: string
-
Optional: refer to marked options
-
Details:
A markdown parser options.
-
-
use
.vue
in markdown -
set code type to
vue
-
write path into code area
``` vue
./code.vue
```
- reslute
<template>
<div>
<vmd14884628711531></vmd14884628711531>
<pre><code class="hljs default">...</code></pre>
</div>
</template>
<script>
import vmd14884628711531 from './code.vue';
export default {
components:{
vmd14884628711531
}
};
import 'highlight.js/styles/default.css'
</script>
- Verify
prefix
andpostfix
are closed - asynchronous read file