GracefulUI

A Graceful UI Toolkit built on Vue

🎸 前言

💃 Graceful UI是一款基于Vue的 UI 库, 秉着造轮子驱动学习的理念, 开发了这一套组件库.

📺 在线演示

项目托管在 👉 Github Page

👋 快速上手

⌛ 安装

Npm

npm install graceful-ui --save

Yarn

yarn add graceful-ui --save

Script 引入

<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"
        }
      ]
  ]
}

cdn 字体

Graceful-ui使用的是icon-font, 使用的时候需要在index.html中引入相关的字体文件

<script src="https://at.alicdn.com/t/font_1763207_sc60ungf6d.js"></script>

🚧 开发

首先确保你安装了yarn

安装好依赖之后运行yarn dev即可开启storybook, 项目使用的是mdx的格式, 具体可以参考Alert组件

storybooK注意事项

• mdx的template中不要出现空格行

更新日志

CHANGELOG

设计规范

参考 react-suite

🔖 参考轮子

Gulu,lulu-ui,iview,elementui,react-suite,ant-design-vue,cuke-ui

License

MIT

Copyright (c) 2020-present, GracefulUI