vueel-demo

介绍

Vueel UI 是一个基于 Vue 2.6.11 和 TypeScript 的 UI 组件库

• 这是我在学习 Vue.js 过程中做的一个 UI 框架
• 查看文档请点击: https://xmasuhai.xyz/vueel-demo-website/
• 查看demo请点击: http://xmasuhai.xyz/vueel-demo/

作者：徐某人

技术栈

• Vue.js 2.x全家桶
  • 常规组件使用vue-property-decorator装饰器@写法
  • 后续组件使用Vue Composition API改写
• TypeScript
  • @ 装饰器写法 配合 vue-class-component
• SCSS
• parcel
• VuePress 1.x 编写组件文档
• GitHub Actions 查看此项目CI/CD持续集成
  • 自动化单元测试
  • 自动化部署GitHub Pages

开始使用

• node版本 12 ~ 16

1.安装组件

yarn add vueel-demo
yarn global add @vue/cli

2.使用

安装依赖 Project setup

yarn install

引入 vueel-demo

import {VueButton, VueButtonGroup, VueIcon} from 'vueel-demo'

export default {
  components: {
    VueButton, VueButtonGroup, VueIcon
  }
}

可省略引入 svg symbols

<script src="//at.alicdn.com/t/font_2138557_fmq5zqg2y0j.js"></script>

UI参考

• Eleme UI
• Ant Design Vue
• Vant UI
• iView UI
• Bulma UI
• 饥人谷的 Gulu UI
• 轱辘 UI源码
• Gulu UI for Vue 3

提问

变更记录

• 添加 图标组件
• 添加 按钮组件
• 添加 输入框组件
• 添加 栅栏组件
• 添加 布局组件
• 添加 标签栏组件
• 添加 弹出框组件
• 添加 浮动消息组件
• 添加 手风琴组件

使用 GitHub Actions 测试通过

联系方式

• xmasuhai@163.com

贡献代码