关于XCUI

XCUI 是基于Vue和 Bootstrap.css 的桌面端组件库。

XCUI的目标是：

满足桌面端页面大部分基础组件需求。
快速开发基于 vue 构建的项目。
保持小体积, 无其他js库依赖(不依赖jquery, Boostrap.js), 仅使用 Boostrap.css 。
简洁优雅。

版本支持

XCUI目前支持vue 1.x版本；推荐使用vue 1.0.26及以上版本。后续XCUI会增加支持vue 2.x的版本，敬请期待。

XCUI需要在页面中引入bootstrap.css。

如何使用

通过npm安装，或在这里下载打包好的版本：

npm install xcui

xcui使用umd方式打包，支持各种模块加载器。

在页面根实例中引入：

import Vue from 'vue'
import xcui from 'xcui'
import 'xcui/dist/xcui.css'
Vue.use(xcui);

或者：

var Vue = require('vue');
var xcui = require('xcui');
Vue.use(xcui);

在页面中声明标签，即可使用。举例：

<xcui-tag :closeable="true" text="'关闭'"></xcui-tag>

除了使用npm进行安装外，还可直接将xcui的js和css文件使用标签形式引入，举例：

<!DOCTYPE html>
<html>
<head>
    <title>Hello XCUI</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="xcui.css">
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="xcui.js"></script>
</head>
<body>
    <div id="app">
        <xcui-tag :closeable="true" :text="'关闭'"></xcui-tag>
    </div>
    <script type="text/javascript">
        Vue.use(xcui);
        new Vue({
            el: '#app',
            ready: function (){
                this.$alert('Hello XCUI!')
            }
        })
    </script>
</body>
</html>

说明 XCUI在使用Vue.use(xcui)后，会默认以xcui-前缀注册所有组件，在Vue实例中可直接使用而不用在components中声明。如：

<xcui-tag></xcui-tag>

当然，您也可以按以下方式使用xcui组件：

import {Tag, Select} from xcui;

export default {
    components: {Tag, Select}
}

全局方法

xcui把一些使用频率高的操作挂载到Vue的根实例，便于调用。如, 在一个components组件中可以这样调用 ( 且不用在页面中显式地声明html标签 )：

this.$alert('alert message') // 警告提示
this.$confirm('是否确认?', content, onOk, onCancel) // 确认提示
this.$toaster('toaster message') // 信息提示
this.$Modal.show(options) // 模态框

具体请见modal 中的说明。

开发

clone the doc repo

$ git clone git@github.com:wmfe/xcui.git

安装依赖

$ npm i

run dev server

$ npm run dev

build components

$ npm run build

加入我们

提交issue

在使用过程中有问题，请在这里给我们提交issue。

提交pull request

代码有问题？请在这里给我们提交pull request。

加入开发团队

加入wmfe团队，一起开发通用组件，交流vue组件开发的心得~

alisa1124/xcui