GracefulUI

A Graceful UI Toolkit built on Vue

中文文档

🎸 Introduction

💃 Graceful UI is a UI library based on Vue, developed with the idea of learning by creating components.

Online Demo 👉

👋 Quick Start

⌛ Installation

Npm

npm install graceful-ui --save

Yarn

yarn add graceful-ui --save

Script Import

<script type="text/javascript" src="graceful-ui.min.js"></script>
<link rel="stylesheet" href="lib/theme/index.css" />

📖 Usage

Full Import

You can import all components of graceful-ui using the following method

import { GracefulUI } from "graceful-ui";

Vue.use(GracefulUI);

Partial Import

The babel-plugin-import plugin allows you to import only the components you need

import { Button } from "graceful-ui";

Vue.use(Button);

You can also directly import and use it in a component

<template>
  <button type="primary" icon="download"></button>
</template>
<script>
import { Button } from "graceful-ui";
export default {
  name: "myComponent",
  components: {
    Button,
  },
};
</script>

Install the babel-plugin-import plugin

yarn add babel-plugin-import -D

// Or
npm install babel-plugin-import -D

Edit the config file of the project

{
  plugins: [
    [
      "component",
      {
        libraryName: "graceful-ui",
        styleLibraryName: "theme",
      },
    ],
  ];
}

CDN Fonts

Graceful-ui uses icon-font, you need to include the related font file in the index.html when using it

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

🚧 Development

First, make sure you have installed yarn

After installing dependencies, run yarn dev to start storybook. The project uses mdx format, you can refer to the Alert component for details.

Storybook Notes

• Do not include blank lines in the mdx template

Changelog

CHANGELOG

Design Guidelines

Refer to react-suite

🔖 Reference Components

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

License

MIT

Copyright (c) 2020-present, GracefulUI