从 Markdown 文件中检索内容并将其转换为 vuejs 中的有效 HTML 代码

Question

我想创建一个文档页面并有一些代表主要内容的降价文件。我有一个导航侧边栏，我可以在其中选择特定内容。

单击导航项时，我需要从 Markdown 文件中读取内容。我有一个方法可以返回所需的路径，但我不知道如何读取文件。

最后，我marked将 Markdown 语法呈现为 HTML 代码。

我创建了一个小示例，显示缺少的内容

https://codesandbox.io/s/006p3m1p1l

有什么我可以用来阅读降价内容的东西吗？

Answer 1

使用 VueResource 从 Markdown 文件中检索内容。导入 VueResource，并使用 Vue.use 方法（main.js）添加它：

import Vue from "vue";
import App from "./App";
import VueResource from "vue-resource";

Vue.config.productionTip = false;
Vue.use(VueResource);

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

然后this.$http.get()在你的 App.vue 文件中使用它的方法来检索 Markdown 文件内容。您可以使用封装在 vue.js 方法、指令或过滤器中的 Markdown 解析库，例如 Showdown.js。

请参阅：https : //github.com/showdownjs/showdown和http://showdownjs.com/

Showdown 也有 vuejs 组件包装器：参见：https : //github.com/meteorlxy/vue-showdown和https://vue-showdown.js.org/

在您的情况下，它应该看起来像这样（使用 vue-showdown）：

<template>
  <div id="app"><VueShowdown :markdown="fileContent"></VueShowdown></div>
</template>

<script>
import VueShowdown from "vue-showdown";

export default {
  name: "App",
  components: VueShowdown,
  data: function() {
    return {
      fileContent: null,
      fileToRender:
        "https://gist.githubusercontent.com/rt2zz/e0a1d6ab2682d2c47746950b84c0b6ee/raw/83b8b4814c3417111b9b9bef86a552608506603e/markdown-sample.md",
      rawContent: null
    };
  },
  created: function() {
    //  const fileToRender = `./assets/documentation/general/welcome.md`;
    //const rawContent = ""; // Read the file content using fileToRender
    // this.fileContent = "### marked(rawContent) should get executed";
    this.getContent();
  },
  methods: {
    getContent() {
      this.fileContent = "rendering ";
      // var self;
      this.$http.get(this.fileToRender).then(
        response => {
          // get body data

          this.fileContent = response.body;
        },
        response => {
          // error callback
          this.fileContent = "An error ocurred";
        }
      );
    }
  }
};
</script>

签入沙箱：https : //codesandbox.io/s/poknq9z6q

如果您的 markdown 文件加载是一次性的，那么您可以导入它的数据，就像导入组件、js 文件和库一样：

<template>
  <div id="app"><VueShowdown :markdown="fileContent"></VueShowdown></div>
</template>

<script>
import VueShowdown from "vue-showdown";

import MarkDownData from './assets/documentation/general/welcome.md';

export default {
  name: "App",
  components: VueShowdown,
  data: function() {
    return {
      fileContent: null,
      rawContent: null
    };
  },
  created: function() {
    //  const fileToRender = `./assets/documentation/general/welcome.md`;
    //const rawContent = ""; // Read the file content using fileToRender
    // this.fileContent = "### marked(rawContent) should get executed";
    this.getContent();
  },
  methods: {
    getContent() {
      this.fileContent = MarkDownData;
    }
  }
};
</script>

见：https : //codesandbox.io/s/xpmy7pzyqz