github的vue组件库_Vue的GitHub按钮组件

github的vue组件库

Vue GitHub按钮 (Vue GitHub Buttons)

GitHub buttons component for Vue.

Vue的GitHub按钮组件。

安装 (Installation)

Via NPM:

通过NPM

NPM

npm install vue-github-buttons

Via Yarn:

通过纱线

yarn add vue-github-buttons

用法 (Usage)

import Vue from 'vue';
import VueGitHubButtons from 'vue-github-buttons';
import App from './App.vue';

// Stylesheet
import 'vue-github-buttons/dist/vue-github-buttons.css';

Vue.use(VueGitHubButtons);
// Or if your don't want to use cache
Vue.use(VueGitHubButtons, { useCache: false });

new Vue({
	el: '#app',
	render: h => h(App)
});
<template>
	<div id="app">
		<gh-btns-watch slug="vuejs/vue" show-count></gh-btns-watch>
		<gh-btns-star slug="vuejs/vue" show-count></gh-btns-star>
		<gh-btns-fork slug="vuejs/vue" show-count></gh-btns-fork>
		<gh-btns-follow user="yyx990803" show-count></gh-btns-follow>
	</div>
</template>

<script>
// JavaScript ...
</script>

<style>
/* Style ... */
</style>

与Nuxt一起使用 (Using with Nuxt)

Add vue-github-buttons/nuxt to modules in nuxt.config.js.

添加vue-github-buttons/nuxtmodulesnuxt.config.js。

module.exports = {
	modules: [
		'vue-github-buttons/nuxt',
		// Or with options
		['vue-github-buttons/nuxt', {
			css: false, // Don't include CSS
			useCache: false // Don't use cache
		}]
	]
};

模块选项 (Module options)

css (css)

Type: Boolean Default: true

类型: Boolean值默认值: true

Include Vue GitHub Buttons's CSS.

包括Vue GitHub ButtonsCSS。

useCache (useCache)

Type: Boolean Default: true

类型: Boolean值默认值: true

Enable caching. (See below)

启用缓存。 (见下文)

与VuePress一起使用 (Using with VuePress)

Require VuePress v1.x

需要VuePress v1.x

Add Vue GitHub Buttons to your plugins in .vuepress/config.js.

.vuepress/config.js Vue GitHub Button添加到您的plugins中。

module.exports = {
	plugins: [
		require('vue-github-buttons/plugins/vuepress'),

		/* Or using plugin with options */

		[
			require('vue-github-buttons/plugins/vuepress'),
			{
				useCache: false
			}
		]
	]
}

Plugin options are the same as Vue plugin options.

插件选项与Vue插件选项相同。

API (API)

插件选项 (Plugin Options)

useCache (useCache)

Type: Boolean Default: true

类型: Boolean值默认值: true

Enable count number caching. (Use session storage)

启用计数缓存。 (使用会话存储 )

GitHub API has limited requests. So, caching may be useful when user refresh the webpage.

GitHub API的请求数量有限 。 因此,当用户刷新网页时,缓存可能会很有用。

Vue.use(VueGitHubButtons, { useCache: false }); // Disable cache

组件 (Components)

gh-btns-watch (gh-btns-watch)

👁️ A watch button.

A️监视按钮。

  • slug - GitHub slug (username/repo).

    slug -GitHub slug(用户名/仓库)

  • show-count - Enable displaying the count number.

    show-count启用显示计数。

gh-btns-star (gh-btns-star)

⭐ A star button.

⭐一个星形按钮。

  • slug - GitHub slug (username/repo).

    slug -GitHub slug(用户名/仓库)

  • show-count - Enable displaying the count number.

    show-count启用显示计数。

gh-btns-fork (gh-btns-fork)

🍴 A fork button.

fork叉子按钮。

  • slug - GitHub slug (username/repo).

    slug -GitHub slug(用户名/仓库)

  • show-count - Enable displaying the count number.

    show-count启用显示计数。

gh-btns-follow (gh-btns-follow)

👤 A follow button.

follow跟随按钮。

  • user - GitHub username.

    user -GitHub用户名。

  • show-count - Enable displaying the count number.

    show-count启用显示计数。

翻译自: https://vuejsexamples.com/github-buttons-component-for-vue/

github的vue组件库

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值