npm包vue-gitment使用教程

很多开发人员使用Gitment管理博客评论，Gitment是一个使用Github Issue作为评论后端的评论系统。由于很多人使用Vue.js构建他们的站点，所以，一个名为vue-gitment的npm包应运而生，它是Gitment的Vue.js组件包装器。

在这篇教程中，我们将学习如何使用vue-gitment包装志愿者申请页面中的Gitment评论系统。

Step 1：安装npm包

在终端中使用以下命令安装vue-gitment：

--- ------- ----------- ------

Step 2：导入组件

通过下面的代码将vue-gitment组件导入到你的Vue.js程序中：

------ ------- ---- -------------

Step 3：设置组件的配置

创建一个Gitment对象并设置它的各种配置，例如：

----- ------- - --- ---------
  --- ---------
  ------ --------------
  ----- ----------------
  ------ -
    ---------- ------- ------------
    -------------- ------- ------------
  --
--

你需要将上面的代码片段替换为你自己的值，具体步骤如下：

  1. 在Github中创建一个新的仓库。
  2. 创建一个新的OAuth应用程序并设置它的环境变量，这里你需要创建客户端ID和客户端密钥。确保授权回调URL与你的站点URL匹配！
  3. 修改代码样例中的值。

Step 4：编写Vue.js组件

现在我们来编写一个Vue组件以显示Gitment评论系统。在此之前确保你已经成功安装和导入vue-gitment组件。

----------
  -----
    --------
      ------------------
      -------------
    -----------
  ------
-----------

--------
------ ------- ---- -------------

------ ------- -
  ----- --------------
  ----------- -
    -------
  --
  ------ -
    ------ -
      -------- -
        --- ---------
        ------ --------------
        ----- ----------------
        ------ -
          ---------- ------- ------------
          -------------- ------- ------------
        --
      -
    -
  --
  --------- -
    ----- ------ - --------------------------------
    ---------- - -----------------------------------------------------------------------
    ---------------------------------

    ------------- - -- -- -
      ---------------------------------------
    -
  -
-
---------

Step 5：使用Vue.js应用程序

最后，将该组件添加到您的Vue应用程序中：

----------
  -----
    ------- -------------------- - ----------------------------
    ------------- -------------------------------------
  ------
-----------

--------
------ ----------- ---- -------------------

------ ------- -
  ----- -----------------
  ----------- -
    -----------
  --
  ------ -
    ------ -
      ------------- -----
    -
  -
-
---------

现在Gitment评论系统已经由vue-gitment组件包装，你可以在你的Vue应用程序中显示它了。让我们运行代码并检查结果：

显示评论

总结

在此教程中，我们学习了如何使用vue-gitment npm包进行Gitment评论的Vue.js包装。我们演示了如何在Vue.js应用程序中导入和使用vue-gitment组件，以及如何正确地配置它以与你的Github仓库匹配。现在，你可以在Vue应用程序中轻松地显示评论系统，并与你的读者交流。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005626681e8991b448dfaeb

阅读全文

猜你喜欢

  • NPM 包 rest-web-gui 使用教程

    简介 rest-web-gui 是一个基于 Node.js 和 Express 框架的 web 界面，可以用于调试、测试和展示 RESTful API。它提供了轻量级、易于定制和可扩展的界面，使得我们...

    3 年前
  • npm 包 rn-common-styles 使用教程

    如果你是一个 React Native 开发者，那么你一定知道样式表在 React Native 中的重要性。但是，随着项目越来越庞大，每一个页面都要从头编写样式表是比较耗时的。

    3 年前
  • npm 包 @cluejs/gulp-env 使用教程

    介绍 在前端开发中，我们经常需要根据不同的环境进行不同的配置，比如开发环境、测试环境、生产环境等。 而 @cluejs/gulp-env 是一个非常实用的 npm 包，可以在 gulp 中方便地进行不...

    3 年前
  • npm 包 @cluejs/gulp-error-handler 使用教程

    在前端开发中，我们常常需要使用 gulp 任务来完成一些自动化构建工作，其中处理错误信息是一个非常重要的问题，因为如果我们没有良好的错误处理机制，很难对出错的代码进行修复。

    3 年前
  • npm包 ArcticFox使用教程

    前言 ArcticFox是一款前端库，它可以快速便捷地生成动态的数据图表，更加方便的是它可以通过npm安装和管理。本文将为大家详细讲解如何使用ArcticFox。 ArcticFox 文档 首先，我们...

    3 年前
  • npm 包 super-array 使用教程

    前言 在前端开发中，经常需要操作数组。但是，JavaScript 提供的原生数组方法并不总是能满足我们的需求。因此，我们需要使用一些第三方的库。 本文将会介绍一个名为 super-array 的 np...

    3 年前
  • npm 包 @cond/sequelize 使用教程

    前言 在 Web 开发中，数据是非常关键的一环。对于开发者来说，操作数据库是相当常见的任务，因而，在后端开发中，ORM 框架已经被广泛使用。随着 Node.js 的流行，ORM 框架的前端版本也应运而...

    3 年前
  • npm 包 nanofp 使用教程

    前言 在前端开发中，函数式编程越来越受到关注，而 nanofp 就是一款实用的函数式编程工具包。本文将详细介绍 nanofp 的使用方法，帮助读者更好地了解和应用这个包。

    3 年前
  • npm 包 kumaran-test-profile 使用教程

    概述 kumaran-test-profile 是一个基于 Node.js 的 npm 包，可用于构建个人网站、个人简介等。它提供了多种样式、颜色风格等配置选项，让用户可以快速地构建一个个性化的个人网...

    3 年前
  • npm 包 react-native-printer 使用教程

    在前端开发中，打印是一个非常重要的功能。而 react-native-printer 是一个非常方便的 npm 包，它可以让你在 React Native 应用程序中方便地实现打印功能。

    3 年前
  • npm 包 dev-http-server 使用教程

    简介 dev-http-server 是一个基于 Node.js 的 HTTP 服务器，主要用于本地开发和调试。它提供了简单易用的接口和丰富的功能，方便开发者进行静态资源服务器的搭建，同时支持自定义路...

    3 年前
  • npm 包 jishon 使用教程

    什么是 jishon? jishon 是一个 npm 包，它提供了 JavaScript 对象和 JSON 格式之间的相互转换功能。它非常易于使用，可以帮助开发者在前端项目中处理 JSON 数据。

    3 年前
  • npm 包 @lassehaslev/executor 使用教程

    在前端开发中，我们经常需要管理和开发多个项目。随着项目越来越多，经常需要在命令行中运行重复的任务，如编译、打包、测试等。这时候，自动化执行工具就可以发挥巨大作用，节省时间和精力。

    3 年前
  • npm 包 response-giver 使用教程

    在前端开发中，我们常常需要向页面返回数据或者信息。npm 包 response-giver 可以帮助我们更方便地实现这个目标。本文将向大家介绍如何使用 response-giver 包，并提供详细的教...

    3 年前
  • npm 包 @adrianobrito/vaporwave 使用教程

    前言 Vaporwave 是一种以 80 年代城市中心氛围为主题的音乐风格和子文化。而 @adrianobrito/vaporwave 就是一种可以在网页上实现 Vaporwave 风格的 npm 包...

    3 年前
  • npm 包 make-case 使用教程

    什么是 make-case make-case 是一个在命令行上使用的 npm 包，用于将输入的字符串转换为不同的命名风格。make-case 支持的命名风格包括：驼峰、蛇形、短横线和常量大写。

    3 年前
  • npm 包 babel-plugin-transform-import 使用教程

    在前端开发中，我们经常需要引入外部库或框架来完成项目。然而，不同的库和框架使用的语法可能不同，甚至可能存在冲突。因此，我们需要一种工具来解决这个问题。那么，babel-plugin-transform...

    3 年前
  • npm 包 react-pro-booking-calendar 使用教程

    前言 在现代 web 应用的开发过程中，前端界面扮演着至关重要的角色。可以说，一个漂亮、功能齐全的前端界面能够很大程度上提高用户的使用体验，从而提升应用的价值。 而在前端界面的开发过程中，涉及到了很多...

    3 年前
  • npm 包 @pauliclark/color-selector 使用教程

    npm 包 @pauliclark/color-selector 是一个可以帮助前端开发者选择颜色的工具包。它包含了简便易用的组件，将颜色选择器整合到您的网站或应用程序中。

    3 年前
  • npm 包 graphql-up 使用教程

    GraphQL 是一种用于 API 构建协议的查询语言，它提供了对 API 数据的强大且灵活的查询方式，同时附带了强大的类型系统，让我们能够以更高的效率和精准度完成开发工作。

    3 年前

相关推荐

    暂无文章