fezui 是一套基于 Vue 的支持多终端的开源UI交互组件库，致力于积木式的快速构建项目，提升产品体验和开发效率、降低开发和维护成本。
- 丰富的组件，涵盖常用场景
- 提供友好的 API ，自由灵活地使用空间
- 细致、漂亮的 UI、可自定义主题
推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 fez模块化工程开发框架 或 browserify/webpack 配合使用。
$ npm install fezui --save通过 unpkg.com/fezui 可以看到 fezui 最新版本的资源，也可以切换版本选择需要的资源，在页面上引入 js 和 css 文件即可开始使用：
<!-- 引入Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/fezui/dist/css/fezui.css">
<!-- 引入组件库 -->
<script src="//unpkg.com/fezui/dist/js/fezui.min.js"></script>- 示例 通过 CDN 可以快速使用 fezui 写出一个示例，您可以复制下面代码或在线预览。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fezui example</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/fezui/dist/css/fezui.css">
</head>
<body>
<div id="app">
<i-button @click="show">Click me!</i-button>
<Modal v-model="visible" title="Welcome">欢迎使用 fezui</Modal>
</div>
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/fezui/dist/js/fezui.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
show: function () {
this.visible = true;
}
}
})
</script>
</body>
</html>高效的开发，离不开基础工程的搭建。在开始使用 fezui 之前，有必要先了解以下基础知识，我们也假设您已经写过 Vue，并掌握了下面的内容。
以下概念贯穿 fezui 前后，建议开发者花点时间来了解。
props传递数据slot内容分发events$emit@click事件
一般在入口页面 index.js 中如下配置：
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue'; // 路由挂载
import Routers from './router.js'; // 路由列表
import fezui from 'fezui';
import 'fezui/dist/css/fezui.css'; // 使用 CSS
Vue.use(VueRouter);
Vue.use(fezui);
// 路由配置
const RouterConfig = {
routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
el: '#app',
router: router,
render: h => h(App)
});如果您想在项目中按需使用组件，减少文件体积，可以这样写：
import Checkbox from 'fezui/src/components/checkbox';- 按需引用仍然需要导入样式，即在
index.js或根组件执行import 'fezui/src/styles/index.less'; - 按需引用是直接引用的组件库源代码，必须要依赖工程编译。
使用:prop传递数据格式为 数字、布尔值或函数时，必须带:(兼容String除外，具体看组件文档)，比如：
正确的使用方法：
<Page :current="1" :total="100"></Page>
错误的使用方法：
<Page current="1" total="100"></Page>