vue中使用展示Markdown文档说明
作者：Alice_sy314
文章介绍了如何在Vue项目中使用Markdown文档,并展示了如何通过安装和配置`markdown-it-vue`和`text-loader`来实现Markdown文档的展示和下载
vue使用、展示Markdown文档
使用Markdown文档
下载markdown-it-vue
npm i markdown-it-vue --save
在对应页面进行引入,并放入compontents中
import MarkdownItVue from 'markdown-it-vue'; import 'markdown-it-vue/dist/markdown-it-vue.css'
使用输入框和markdown-it-vue配合实现
<div class='textarea_area area'>
<el-input
type="textarea"
autosize
placeholder="请输入内容"
v-model="content">
</el-input>
</div>
<div class='markdown_area area'>
<markdown-it-vue class="md-body" :content="content" />
</div>
<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components:{MarkdownItVue},
data() {
return {
content:"",
}
},
}
</script>
展示Markdown文档
在上述基础上
下载text-loader
npm i text-loader --save
配置webpack.base.config.js，在rules中加入
{ test: /\.md$/, loader: 'text-loader',}引入相关md文件
import documentation from './documentation.md'
将文件作为变量显示在markdown-it-vue上
<div class='markdown_wrapper_content'>
<div class='markdown_area area'>
<markdown-it-vue class="md-body" :content="content" />
</div>
</div>
<script>
import MarkdownItVue from 'markdown-it-vue'
import documentation from './documentation.md'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components:{MarkdownItVue},
data() {
return {
content:documentation,
}
},
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。