很多开发人员使用Gitment管理博客评论，Gitment是一个使用Github Issue作为评论后端的评论系统。由于很多人使用Vue.js构建他们的站点，所以，一个名为vue-gitment的npm包应运而生，它是Gitment的Vue.js组件包装器。
在这篇教程中，我们将学习如何使用vue-gitment包装志愿者申请页面中的Gitment评论系统。
Step 1：安装npm包
在终端中使用以下命令安装vue-gitment：
npm install vue-gitment --save
Step 2：导入组件
通过下面的代码将vue-gitment组件导入到你的Vue.js程序中：
import Gitment from 'vue-gitment'
Step 3：设置组件的配置
创建一个Gitment对象并设置它的各种配置，例如：
-- -------------------- ---- -------
----- ------- - --- ---------
--- ---------
------ --------------
----- ----------------
------ -
---------- ------- ------------
-------------- ------- ------------
--
--你需要将上面的代码片段替换为你自己的值，具体步骤如下：
- 在Github中创建一个新的仓库。
- 创建一个新的OAuth应用程序并设置它的环境变量，这里你需要创建客户端ID和客户端密钥。确保授权回调URL与你的站点URL匹配！
- 修改代码样例中的值。
Step 4：编写Vue.js组件
现在我们来编写一个Vue组件以显示Gitment评论系统。在此之前确保你已经成功安装和导入vue-gitment组件。
-- -------------------- ---- -------
----------
-----
--------
------------------
-------------
-----------
------
-----------
--------
------ ------- ---- -------------
------ ------- -
----- --------------
----------- -
-------
--
------ -
------ -
-------- -
--- ---------
------ --------------
----- ----------------
------ -
---------- ------- ------------
-------------- ------- ------------
--
-
-
--
--------- -
----- ------ - --------------------------------
---------- - -----------------------------------------------------------------------
---------------------------------
------------- - -- -- -
---------------------------------------
-
-
-
---------Step 5：使用Vue.js应用程序
最后，将该组件添加到您的Vue应用程序中：
-- -------------------- ---- -------
----------
-----
------- -------------------- - ----------------------------
------------- -------------------------------------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----- -----------------
----------- -
-----------
--
------ -
------ -
------------- -----
-
-
-
---------现在Gitment评论系统已经由vue-gitment组件包装，你可以在你的Vue应用程序中显示它了。让我们运行代码并检查结果：
<button>显示评论</button>
<blog-comment></blog-comment>总结
在此教程中，我们学习了如何使用vue-gitment npm包进行Gitment评论的Vue.js包装。我们演示了如何在Vue.js应用程序中导入和使用vue-gitment组件，以及如何正确地配置它以与你的Github仓库匹配。现在，你可以在Vue应用程序中轻松地显示评论系统，并与你的读者交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626681e8991b448dfaeb