前言
npm 是 Node.js 的包管理器，我们可以通过其中的包来方便地构建前端工程。而 vue-github-lawn 是一个基于 Vue.js 的组件库，提供了一些用于展示 Github 数据的组件，比如仓库表格，用户个人信息等。
在本文中，我们将会详细地介绍 vue-github-lawn 的使用方法，帮助您更好地了解如何使用这个 npm 包构建您的前端项目。
安装
首先，我们需要在项目中安装 vue-github-lawn。可以通过以下命令行进行安装：
npm install vue-github-lawn --save
当然，由于其依赖于 Vue.js，我们还需要在项目中引入 Vue.js。
import Vue from 'vue' import GithubLawn from 'vue-github-lawn' Vue.use(GithubLawn)
这里我们通过 Vue.use() 函数把 GithubLawn 作为一个 Vue 插件使用，这样我们就可以在 Vue 实例中使用它提供的组件了。在此之后，您就可以在您项目的 HTML 中使用 github-lawn 标签来按需展示 Github 数据了。
组件
仓库表格
<github-lawn-table> 组件可以用于展示 Github 上指定用户/组织的仓库列表。默认情况下，它会抓取 Github 上指定用户/组织的所有公共仓库，并将它们展示在一个表格中。
<github-lawn-table username="vuejs"></github-lawn-table>
<github-lawn-table> 可以接受以下 props：
username：Github 用户/组织的用户名，必填。display-limit：最多显示的仓库数量，选填。如果不填，则显示所有仓库。sort-by：按照仓库的哪个字段排序，选填。默认为仓库的创建时间。
用户个人信息
<github-lawn-user> 组件可以用于展示 Github 上指定用户/组织的个人信息。
<github-lawn-user username="vuejs"></github-lawn-user>
<github-lawn-user> 可以接受以下 props：
username：Github 用户/组织的用户名，必填。
示例代码
下面是一个使用 vue-github-lawn 的基本示例，其中我们展示了某个指定 Github 用户（比如 Vue.js 的仓库列表）：
-- -------------------- ---- -------
----------
-----
---- ------ ---- -----
------------------ -------------------------------------
------
-----------
--------
------ - ---------- - ---- -----------------
------ ------- -
----------- -
-----------
--
-
---------结语
以上就是 vue-github-lawn 的基本使用方法和示例代码。当然，您可以根据自己的需要和项目要求，对其中的组件进行更改和二次开发。
希望这篇文章能够对您在使用 vue-github-lawn 时有所帮助，也希望它能够对您进一步了解前端技术有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fcc81e8991b448dd541