gg-y-ui

An enterprise-class UI components based on YUI Design and Vue for web.

Usage

Fully import

In main.js:

import Vue from 'vue';
import YUI from 'y-ui';
import 'y-ui/lib/y-ui.common.css';
import App from './App.vue';

Vue.use(YUI);

new Vue({
  el: '#app',
  render: h => h(App),
});

The above imports YUI entirely. Note that CSS file needs to be imported separately.

On demand

With the help of babel-plugin-component, we can import components we actually need, making the project smaller than otherwise.

First, install babel-plugin-component:

yarn add -D babel-plugin-component

Then, edit .babelrc :

// edit your .babelrc file as the following
{
    // ...
    "plugins": [
        [
            "component",
            {
                "libraryName": "y-ui"
            }
        ]
    ]
}

Next, if you need Button and Switch, edit main.js:

import Vue from 'vue';
import { Button, Switch } from 'y-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Switch.name, Switch);
/* or
 * Vue.use(Button)
 * Vue.use(Switch)
 */

new Vue({
  el: '#app',
  render: h => h(App),
});

Design standard

Import the variable in less files:

@import '~y-ui/src/styles/var.less';

#app {
  background-color: @blue1;
}

Development

Skip this part if you just want to use YUI.

For those who are interested in contributing to Element, please refer to our contributing guide to see how to run this project.