在 Nuxt 中使用

Nuxt.js在 Nuxt 中使用 - 图1 是一个基于 Vue.js 的服务端渲染框架。

使用方法

安装

通过 NPM 安装 vssue 和你需要使用的 API 包 ：

  1. npm install vssue
  2. npm install @vssue/api-github-v3

创建 Nuxt 插件

通过 Nuxt 官方文档在 Nuxt 中使用 - 图2 查看创建和使用插件的详细方法

首先创建文件 plugins/vssue.js:

  1. import Vue from 'vue'
  2. import Vssue from 'vssue'
  3. import GithubV3 from '@vssue/api-github-v3'
  4. import 'vssue/dist/vssue.css'
  6. Vue.use(Vssue, {
  7.   api: GithubV3,
  8.   owner: 'OWNER_OF_REPO',
  9.   repo: 'NAME_OF_REPO',
  10.   clientId: 'YOUR_CLIENT_ID',
  11.   clientSecret: 'YOUR_CLIENT_SECRET',
  12. })

然后，在 nuxt.config.js 中引入:

  1. module.exports = {
  2.   // Vssue 只需要在 client 中引入，因此使用 mode client 即可
  3.   plugins: [
  4.     { src: '~/plugins/vssue', mode: 'client' }
  5.   ],
  7.   // Vssue 提供的是 ES6 模块，所以需要配置 transpile
  8.   build: {
  9.     transpile: [
  10.       '(@vssue|vssue)\/((?!\/node_modules\/).)*\.js$',
  11.     ],
  12.   },
  13. }

在页面中使用 Vssue

创建页面 pages/index.vue ，使用 <Vssue> 组件即可:

  1. <template>
  2.   <div>
  3.     <h1>Vssue Demo</h1>
  5.     <!-- Vssue 只需要在 Client 渲染即可，所以使用 <ClientOnly> 组件包裹起来 -->
  6.     <ClientOnly>
  7.       <Vssue title="Vssue Demo" />
  8.     </ClientOnly>
  9.   </div>
  10. </template>

参考 Nuxt ClientOnly 组件在 Nuxt 中使用 - 图3

提示

你可以前往 meteorlxy/vssue-demo在 Nuxt 中使用 - 图4 来获取 demo 代码。