开始使用

前往支持的代码托管平台 - 创建 OAuth App 查看详细指引。

完成这一步之后，你将会配置好一个 OAuth App，并得到对应的和 client secret，它们将会用于 Vssue 的使用。

repo: 用来存储评论的 repository
clientId: OAuth App 的 client id
clientSecret: OAuth App 的 client secret （只有在使用某些平台时需要）

Vssue 可以在浏览器中通过 <script> 标签直接使用。由于 Vssue 依赖于，所以你还需要引入 Vue。

提示

如果你还不了解的不同版本间的区别（即 vue.runtime.min.js, vue.min.js 等），可以参考 Vue 文档。

Vssue 同样提供了不同版本的构建。细节可以查看章节。

Vssue 是一个 Vue 插件 / 组件，可以在 Vue 项目中引入并使用。

Vssue 只提供了 ES2015 代码，因为我们假设你在使用或其他工具。

安装 vssue:

npm install vssue

安装对应平台的 api 包：

通过 import Vssue from 'vssue' 你会得到一个 Vue 插件。调用 Vue.use() 来使用它并进行配置。这会注册一个名称为 Vssue 的全局组件。

然后你就可以在 SFC 中使用 Vssue 组件了：

通过 import { VssueComponent } from 'vssue' 你会得到一个 Vue 组件。

提示

当你通过 Vue.use() 把 Vssue 作为插件使用时，这个组件就已经通过 Vue.component() 注册为一个名称为 Vssue 的全局组件了。

如果你不想把它注册为全局组件，你可以通过这种方式引入它。

需要注意的是，如果你只作为组件引入 Vssue，就没有通过 Vue.use() 设置的“全局”配置了，你必须通过 Prop options 传入所有必需的 Vssue 配置。参考。

<template>
  <Vssue
    :title="title"
    :options="options"
  />
</template>

<script>
import { VssueComponent } from 'vssue'
import GithubV3 from '@vssue/api-github-v3'
import 'vssue/dist/vssue.css'

export default {
  name: 'VssueDemo',

  components: {
    'Vssue': VssueComponent,
  },

  data () {
    return {
      title: 'Vssue Demo',
      options: {
        api: GithubV3,
        owner: 'OWNER_OF_REPO',
        repo: 'NAME_OF_REPO',
        clientId: 'YOUR_CLIENT_ID',
        clientSecret: 'YOUR_CLIENT_SECRET', // 只有在使用某些平台时需要
      },
    }
  },
}
</script>

和 Vue 类似，Vssue 也提供了不同的构建版本以供使用。

这些文件放置在 dist 文件夹中：