- package.json文件中添加以下依賴，然後重新運行npm install
"vue-template-compiler": "2.6.10",
"github-markdown-css": "^4.0.0",
"highlight.js": "^10.5.0",
"html-loader": "^1.3.2",
"markdown-it": "^12.0.4",
"markdown-it-container": "^3.0.0",
"markdown-loader": "^6.0.0",
"vue-loader": "^15.9.6",
"vue-markdown-loader": "^2.4.1"
- vue.config.js中添加以下配置：
module.exports = {
chainWebpack: config => {
config.module
.rule('md')
.test(/\.md/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
wrapper: 'article',
wrapperName: '123',
raw: true,
preventExtract: true,
use: [
[require('markdown-it-container'), 'tip'],
[require('markdown-it-container'), 'warning'],
[require('markdown-it-container'), 'danger'],
[require('markdown-it-container'), 'details'],
],
})
// .end()
}
}
main.js中添加：
import 'github-markdown-css'
App.vue中引入.md文件：
<div id="app">
<div class="markdown-body">
<markdown-test>
<template v-slot:footer>
<div>test</div>
<button>footer</button>
</template>
</markdown-test>
</div>
</div>
<script>
import markdownTest from './components/markdownTest.md'
export default {
name: 'App',
components: {
markdownTest
}
}
</script>
markdownTest.md文件的編寫：
#### 按鈕狀態
1. 普通狀態
2. hover 鼠標懸停狀態
3. active 點擊狀態
4. focus 獲取焦點狀態
5. 忙碌/等待狀態
6. 禁用狀態
```scss
button {
background: orange;
&:hover {
}
&:active {
}
&:focus {
}
&.busy {
}
&:disabled {
}
}
```
<slot name="footer"></slot>
::: warning
注意：
:::
::: danger
警告：
:::
::: tip
提示：這是一段提示
:::
```md
{{ 1 + 1 }}
vue.config.js中配置markdown-it-container是爲了渲染引用塊的樣式和vuepress中的類似，.md文件中支持插槽的寫法，還能引入全局組件。
