在 vuepress 中渲染本地 JSON 数据

Question

我有一个简单的 vuepress 网站，我正在使用 index.md 读取 .json 文件；

{{ require('./nba.json') }}

效果很好，看起来像附件中的图片；

json on vuepress site

如您所见，它看起来不是最好的。在 vuepress 中，我如何专门设置从 json 读取的内容的样式，即。更改字体大小，以整洁的方式显示信息等？

Answer 1

在 Vuepress（和一般的 Vue + Webpack）中，导入的 json 文件只是 JavaScript 对象，因此您可以将它与 Vue 一起使用以生成任何您想要的...

<div v-for="i in items">
    <h2>{{i.Home_neutral}} - {{i.Visitor_Neutral}}</h2>
    <p>{{ i.Date }}</p>
</div>

<script>
import data from './nba.json'
export default {
  data () {
      return {
          items: data
      }
  }
}
</script>

有两种方法可以使用此代码。

您可以将它作为 NbaMatches.vue 放入 docs/.vuepress/components 目录 - 它变成 global component 并且可以在任何 md 文件中作为 <NbaMatches /> 使用（您需要将模板部分 - <script> 以上的所有内容 - 包装到 <template></template>)
您可以直接将上述 copy/paste 代码直接写入任何 md 文件，它应该可以工作

在 vuepress 中渲染本地 JSON 数据

Rendering local JSON data in vuepress

javascript

json

vue.js

vuepress