jcloud-ele-ui

Element - JCloud

A Vue.js 2.0 UI Toolkit for Web.

Modified from Element

安装 / Install

npm i jcloud-ele-ui -S

使用 / Useage

完整引入 / Fully Import

import Vue from 'vue';

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

Vue.use(UI);

按需引入 / Import Demand

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