infinity-ui

基于Vue2.x的前端组件库

开启一个组件库项目

• vue init webpack-simple XXX 建立一个简易的vue项目
• 安装插件 extract-text-webpack-plugin
• 照搬 webpack.config.js 和 webpack.dev.js 修改其中的名称为自己自定义的组件库名
• 修改 package.json, 加入 --config webpack.dev.js、--config webpack.config.js, "main": "dist/iy.js","private": false
• 新建一个site文件夹用来测试自己的组件
• src文件夹用来开发组件 先删掉文件夹中的所有内容, assets文件夹放样式文件 components文件夹放组件文件 index.js 全局注册组件插件 style.js 导入样式

发布

• npm run build 打包
• 注册 npm 帐号
• npm login 登录
• npm publish 发布

注意 每次发布必须修改版本号！

使用方法

import {InfinityUI} from 'infinity-ui' Vue.use(InfinityUI) 引入全部组件

import {Button} from 'infinity-ui' Vue.use(Button) 按需引入

组件描述

Button 按钮

• type 按钮的类型：'default','success', 'warning', 'error', 'info', 'link'
• size 按钮的尺寸：'large', 'medium', 'small', 'mini'
• shape 按钮的形状：'round'圆角, 'rectangle'直角, 'bread' 面包按钮
• disabled 是否禁用按钮：true/false
• ghost 是否开启幽灵按钮模式：true/false
• dark 是否开启暗沉模式：true/false

Input 输入框

• 支持各种原生属性
• value / v-model 绑定值
• size 输入框的尺寸：'large', 'medium', 'small', 'mini'
• autocomplete 自动补全：on, off
• placeholder 输入框占位文本
• maxlength 最大输入长度
• minlength 最小输入长度
• disabled 是否禁用输入框：true/false
• change 事件 回调参数输入框值