在Vuepress中呈现本地JSON数据

编程问答 2022-06-12

问题描述

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

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

它工作正常，看起来像所附的图片；

json on vuepress site

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

解决方法

在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>

有两种使用此代码的方法。

  1. 您可以将其以docs/.vuepress/components的形式放入NbaMatches.vue目录中-它变成global component，并且可以以md的形式在任何<NbaMatches />文件中使用（您需要将模板部分-<script>上方的所有内容都包装到<template></template>中）
  2. 您可以直接将上面的代码直接复制/粘贴到任何md文件中，它应该可以工作
javascriptjsonvue.jsvuepress