https://github.com/xmasuhai/vueel-demo

展示页面请访问：https://xmasuhai.xyz/vueel-demo-website/ ---------------------------------------------------------------------->查看demo请点击: http://xmasuhai.xyz/vueel-demo/
https://github.com/xmasuhai/vueel-demo

composition-api scss tsx typescript vue vue-class-component

Last synced: 27 days ago
JSON representation

展示页面请访问：https://xmasuhai.xyz/vueel-demo-website/ ---------------------------------------------------------------------->查看demo请点击: http://xmasuhai.xyz/vueel-demo/

• Host: GitHub
• URL: https://github.com/xmasuhai/vueel-demo
• Owner: xmasuhai
• License: mit
• Created: 2020-10-11T14:38:42.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-27T10:25:44.000Z (almost 2 years ago)
• Last Synced: 2024-11-30T10:11:41.350Z (about 2 months ago)
• Topics: composition-api, scss, tsx, typescript, vue, vue-class-component
• Language: Vue
• Homepage: http://xmasuhai.xyz/vueel-demo-website/
• Size: 59.7 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vueel-demo

[![CI](https://github.com/xmasuhai/vueel-demo/actions/workflows/unit-test-actions.yml/badge.svg)](https://github.com/xmasuhai/vueel-demo/actions/workflows/unit-test-actions.yml)

![GitHub package.json version](https://img.shields.io/github/package-json/v/xmasuhai/vueel-demo)

![npm license](https://img.shields.io/github/license/xmasuhai/vueel-demo)

## 介绍

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

- 这是我在学习 Vue.js 过程中做的一个 UI 框架

- 查看文档请点击: [https://xmasuhai.xyz/vueel-demo-website/](https://xmasuhai.xyz/vueel-demo-website/)

- 查看demo请点击: [http://xmasuhai.xyz/vueel-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`持续集成](https://github.com/xmasuhai/vueel-demo/actions)

  - 自动化单元测试

  - 自动化部署`GitHub Pages`

## 开始使用

- `node`版本 `12 ~ 16`

### 1.安装组件

```sh

yarn add vueel-demo

yarn global add @vue/cli

```

### 2.使用

#### 安装依赖 Project setup

```

yarn install

```

#### 引入 `vueel-demo`

```js

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

export default {

  components: {

    VueButton, VueButtonGroup, VueIcon

  }

}

```

#### 可省略引入 `svg symbols`

```html

```

## UI参考

- Eleme UI

- Ant Design Vue

- Vant UI

- iView UI

- Bulma UI

- 饥人谷的 [Gulu UI](https://github.com/FrankFang/frank-test-1)

- [轱辘 UI源码](https://github.com/FrankFang/gulu)

- [Gulu UI for Vue 3](https://github.com/FrankFang/gulu-for-vue3)

## 提问

## 变更记录

- 添加 图标组件

- 添加 按钮组件

- 添加 输入框组件

- 添加 栅栏组件

- 添加 布局组件

- 添加 标签栏组件

- 添加 弹出框组件

- 添加 浮动消息组件

- 添加 手风琴组件

## 使用 GitHub Actions 测试通过

![github actions badge](https://github.com/xmasuhai/vueel-demo/actions/workflows/unit-test-actions.yml/badge.svg)

## 联系方式

- `[email protected]`

## 贡献代码