README-CN.md

GracefulUI

A Graceful UI Toolkit built on Vue

English Docs

🎸 前言

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

在线演示 👉

👋 快速上手

⌛ 安装

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