实现一个课件查看（文档/视频查看）的移动端页面。vue3➕vant，请给我写个完整的例子

好的，以下是一个基本的移动端页面，使用Vue3和Vant框架来实现课件查看（文档/视频查看）功能。

代码如下：

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="document" :to="{ path: '/document' }">
      文档
    </van-tabbar-item>
    <van-tabbar-item icon="play-circle" :to="{ path: '/video' }">
      视频
    </van-tabbar-item>
  </van-tabbar>

  <router-view></router-view>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      active: 0
    }
  }
})
</script>

在这个例子中，我们使用Vant框架的`van-tabbar`组件来实现底部导航栏。我们定义了两个`tabbar-item`，一个用于文档，一个用于视频。在每个`tabbar-item`中，我们使用Vue Router将其导航到对应的页面。

下面是文档页面的代码：

<template>
  <van-list>
    <van-cell v-for="document in documents" :key="document.id">
      {{ document.name }}
    </van-cell>
  </van-list>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      documents: [
        { id: 1, name: '文档1' },
        { id: 2, name: '文档2' },
        { id: 3, name: '文档3' }
      ]
    }
  }
})
</script>

在这个页面中，我们使用Vant框架的`van-list`和`van-cell`组件来展示文档列表。我们将文档数据定义在`data`中，并使用`v-for`指令来循环渲染每个文档。

最后是视频页面的代码：

<template>
  <van-list>
    <van-cell v-for="video in videos" :key="video.id">
      {{ video.name }}
    </van-cell>
  </van-list>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      videos: [
        { id: 1, name: '视频1' },
        { id: 2, name: '视频2' },
        { id: 3, name: '视频3' }
      ]
    }
  }
})
</script>

这个页面和文档页面类似，使用`van-list`和`van-cell`展示视频列表。

通过以上代码，我们实现了一个基本的移动端页面，能够展示文档和视频列表，并且能够在底部导航栏中进行切换。