Element - JCloud

> A Vue.js 2.0 UI Toolkit for Web.

Modified from Element

安装 / Install

``
npm i jcloud-ele-ui -S
`

使用 / Useage

$3

`
import Vue from 'vue';

import UI from 'jcloud-ele-ui';
import 'jcloud-ele-ui/lib/theme-jcloud/index.css';

Vue.use(UI);
`

$3

`
import Vue from 'vue';
import { Button, ButtonGroup, Menu, Submenu, MenuItem } from 'jcloud-ele-ui';

Vue.use(Button);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(ButtonGroup);
`

组件样式的引用将会由babel插件(后文介绍)自动加入, 但公共样式需要手动引入
`
import 'jcloud-ele-ui/lib/theme-jcloud/base.css';
import 'jcloud-ele-ui/lib/theme-jcloud/reset.css';
`

以下组件使用特殊的的引入方式
`
import { Loading, MessageBox, Notification, Message } from 'jcloud-ele-ui';

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
`

同时需要使用babel-plugin-component

安装
`
npm i babel-plugin-component -D
`
在.babelrc中添加配置
`
{
..., // other configs
"plugins": [
..., // other plugins
[
"component", {
"libraryName": "jcloud-ele-ui",
"styleLibraryName": "theme-jcloud"
}
]
]
}
``
babel-plugin-component会自动引入对应组件的样式文件. 因此无需单独引入主题中的index.css

LICENSE

MIT