这篇文章将为大家详细讲解有关怎么将.md文件导入到vue项目中，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
货比三家，我推荐以下方式
计算
安全
数据库
网络和加速
企业服务
//安装
npm install --save html-loader;
npm install -- save markdown-loader;
//webpack
{
test: /\.md$/,
loader: "html-loader",
},
{
test: /\.md$/,
loader: "markdown-loader"
}大坑预警：我不知道在哪里抄的配置，一定不要配置option（配置了的话表格 代码 都不能好好转化）
以上真的就完成了转化了。是不是so easy ！！！ 再来换个皮肤（穿上衣服）
强烈推荐
npm install github-markdown-css
import 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在min.js
//自己也可以再调整调整 (贡献一版 我们调整的一版样式)
.markdown-body {
padding: 20px;
min-width: 200px;
max-width: 900px;
font-size: 12px;
h3 {
font-size: 18px;
margin: 1em 0 15px;
padding-top: 0.8em;
padding-bottom: 0.8em;
}
h4 {
font-size: 14px;
margin: 22px 0 16px;
}
h5 {
font-size: 13px;
margin: 20px 0 16px;
}
h6 {
font-size: 12px;
margin: 16px 0 16px;
font-weight: 700;
}
p {
font-size: 12px;
line-height: 24px;
color: #666666;
margin-top: 0px;
margin: 8px 0;
margin: 14px 0 14px;
}
pre {
background-color: #eee;
margin-bottom: 8px;
margin-top: 8px;
margin: 12px 0 12px;
}
blockquote {
margin-bottom: 8px;
margin-top: 8px;
margin: 14px 0 14px;
background-color: #eee;
padding: 16px 16px;
}
tr {
background-color: #f5f5f5;
}
code {
background-color: #eee;
}
ul,
ol,
li {
list-style: unset;
font-size: 12px;
line-height: 20px;
color: #666666;
margin-top: 0px;
margin: 8px 0;
}
blockquote {
border-color: #48b6e2;
}
table {
display: table;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
}页面
<template>
<div class="markdown-body" v-html="htmlMD"></div> //markdown-body 一定要写这个class名
</template>
<script>
export default {
name: 'GitBook',
data() {
return {
htmlMD: ''
};
},
mounted() {
this.getHtmlMD(this.$route.query.databaseType);
},
methods: {
getHtmlMD(type) {
this.htmlMD = require(`./GitBook/${type.toLowerCase()}.md`); //导入md 我这里根据不同的类型拿不同md文件
}
}
};
</script>
关于怎么将.md文件导入到vue项目中就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
