vue展示md文件,前端读取展示markdown文件

方案1:每次都需要重新打包,每次修改都需要build

  直接使用require + v-html;

核心代码如下:  
  1. 首先需要添加MD文件的loader就是 markdown-loader
    npm install --sava markdown-loader   2. 然后require加载对应的资源,也可以通过ajax获取资源对象
    this.htmlMD = require('./xxx.md');
      或
    axios.get(url).then((response) => {      
      this.htmlMD = response.data;
    });
  3. 最后通过v-html展示在对应的结构块即可
     <div v-html="htmlMD"></div>

方案2: 直接读取static静态资源MD文件

  使用vue-markdown组件 + axios;

  1. 首先下载 vue-loader 和 vue-markdown 组件
  npm install --sava markdown-loader vue-markdown

  2. 然后获取对应的资源对象
  const url = `./xxx.md`;
  axios.get(url).then((response) => {
  this.htmlMD = response.data;
  });
  3. 最后在 vue-markdown 组件上展示即可,记得在 components 上先导入
  <VueMarkdown :source="htmlMD"></VueMarkdown>

还有一个最重要的代码部分忘记写了,现在补充上

// 拉取该文件夹下所有文件信息
const filesMD = require.context('@/../static/xxxxMD', true, /\.md$/);
const filesMDNames = filesMD.keys();
const tmepListDatas = [];
filesMDNames.map((item) => {
const listObj = {};
const listItemS = item.split('/');
if (listItemS.length > 0) {
listObj.name = listItemS[1].replace('.md', '');
listObj.path = item;
listObj.children = [];
listObj.showChild = false;
}
  return tmepListDatas.push(listObj);
});

上面这段代码的意思是:如果获取某个文件夹下面的所有md文件,拿到整个文件夹的信息后可以用于生成侧边栏以及别的操作

欢迎关注博主:微信公众号交流,不定时更新前端资源

vue展示md文件,前端读取展示markdown文件

上一篇:ZABBIX安装官方指南


下一篇:ORACLE SQL性能优化(全)