github的vue组件库
Vue GitHub按钮 (Vue GitHub Buttons)
GitHub buttons component for Vue.
Vue的GitHub按钮组件。
安装 (Installation)
Via 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/nuxt
到modules
中nuxt.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组件库