1.0.4 • Published 4 years ago
infinity-ui v1.0.4
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 事件 回调参数输入框值