Vue-beauty

基于 ant design 的漂亮的 vue 组件库

暂无中文翻译,

vue-beauty

Beautiful UI components build with vue and ant design

  • Vue官网
  • Ant.Design官网
  • 在本项目release之前,你都不应该在生产环境中使用
  • vue2.0版本请关注next分支

已完成组件

  • Alert 警告提示
  • Badge 徽标数
  • Card 卡片
  • Collapse 折叠面板
  • Switch 开关
  • Rate 评分
  • Notification 通知提醒框
  • Message 全局提示
  • Input 输入框
  • InputNumber 数字输入框
  • Affix 固钉
  • Steps 步骤条
  • Radio 单选框
  • BackTop 回到顶部
  • Modal 模态框
  • Spin 加载中
  • Tag 标签
  • Upload 上传
  • Icon 图标
  • Select 选择器
  • Transfer 穿梭框
  • Tree 树形控件
  • TreeSelect 树选择
  • Pagination 分页
  • QueueAnim 进出场动画
  • Form 表单
  • Popover 气泡卡片
  • Popconfirm 气泡确认框
  • TimePicker 时间选择框
  • Cascader 级联控件
  • Carousel 走马灯
  • Menu 菜单
  • DataTable 数据表格

(持续更新中。。。)

引入

import Vue from 'vue'
import '../components/style/index.less'
import vue_beauty from '../components'

Vue.use(vue_beauty)

// or
import {
  select,
  button
  // ...
} from '../components'

Vue.use(select)
Vue.use(button)

目录结构

    VUE-BEAUTY/
    |-- build               存放webpack的配置
    |-- components          存放组件
    |   |-- xxx             xxx组件
    |   |-- style           组件的公共样式
    |    `-- components     存放组件的样式
    |-- src                 存放文档
    |   |-- components      一些文档组件
    |   |-- views           组件的说明文档
    |   `-- routers.js      路由
    `-- utils               一些工具方法

参与流程

  • 我们会通过issue的形式发布一系列任务
  • 在任务issue下面回复并认领
  • 根据某个issue,fork并在develop分支下实现
  • 提交pr到develop分支
  • 合并pr,测试并发布到master分支
  • NOTICE:可以加入QQ群548062121讨论

开发步骤

  • ant-design1.11官网拷贝相应的样式到components/style/components下
  • 打开style/components/index.less,导出组件的样式
  • 在components文件夹下开发组件
  • 到components/index.js下导出组件
  • 到src/views下编写组件的使用文档
  • 修改以下文件:src/routers.js、src/views/components.vue添加文档的路由和链接
  • NOTICE:如果你需要增加样式,可以在组件对应的样式目录中增加xxx_vb.less(如button_vb.less),并在index.less中import该样式文件

命名规范

  • 文件,目录均以小写开头,驼峰式(如inputNumber)
  • 组件的import export 均以v开头,驼峰式(如vInputNumber)

感谢

  • 感谢为这个项目做过贡献的所有朋友。
  • 感谢vue和ant design的开发者。
  • 感谢okoalavue-antd

vue-beauty 暂时没有中文说明

我们期待您参与进来翻译和完善

该操作会锁定该库2天以防止其它用户重复翻译,然后会自动释放

讨论区