GracefulUI

A Graceful UI Toolkit built on Vue

Demo

TODO

Quick Start

Install

1. Npm

 npm install graceful-ui --save

2. Yarn

 yarn add graceful-ui --save

3. Script tag

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

Usage

1. Registration all in one

You can register all the components brought with graceful-ui with the following command

 import { GracefulUI } from "graceful-ui";

Vue.use(GracefulUI);

2. Partial registration

With help of babel-plugin-import, you can import components needed in your project.

 import { Button } from "graceful-ui";

Vue.use(Button);

You can also use imported component on your component template

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

Install plugin

 yarn add babel-plugin-import -D

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

Edit your project babel config file

 // .babelrc or babel.config.js
plugins: [
    [
      "component",
      {
        libraryName: "graceful-ui",
        styleLibraryName: "theme"
      }
    ]
  ]

CDN fonts

Add the following script to your document head to use fonts.

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

License

MIT

Copyright (c) 2020-present, GracefulUI