💃 Graceful UI是一款基于Vue的 UI 库, 秉着造轮子驱动学习的理念, 开发了这一套组件库.
项目托管在 👉 Github Page
Npm
npm install graceful-ui --saveYarn
yarn add graceful-ui --saveScript 引入
<script type="text/javascript" src="graceful-ui.min.js"></script>
<link rel="stylesheet" href="lib/theme/index.css" />全量引入
你可以通过下面的方式引入graceful-ui的所有组件
import { GracefulUI } from 'graceful-ui';
Vue.use(GracefulUI);局部引入
babel-plugin-import插件允许你引入项目中需要的组件
import { Button } from 'graceful-ui';
Vue.use(Button);也可以直接在组件中引入使用
<template>
<button type="primary" icon="download"></button>
</template>
<script>
import { Button } from 'graceful-ui';
export default {
name: 'myComponent',
components: {
Button,
},
};
</script>安装插件babel-plugin-import
yarn add babel-plugin-import -D
// Or
npm install babel-plugin-import -D编辑项目的config文件
{
plugins: [
[
"component",
{
"libraryName": "graceful-ui",
"styleLibraryName": "theme"
}
]
]
}Graceful-ui使用的是icon-font, 使用的时候需要在index.html中引入相关的字体文件
<script src="https://at.alicdn.com/t/font_1763207_sc60ungf6d.js"></script>首先确保你安装了yarn
安装好依赖之后运行yarn dev即可开启storybook, 项目使用的是mdx的格式, 具体可以参考Alert组件
- mdx的template中不要出现空格行
参考 react-suite
Gulu,lulu-ui,iview,elementui,react-suite,ant-design-vue,cuke-ui
Copyright (c) 2020-present, GracefulUI
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent