# MintUI

**Repository Path**: boheweb/mint-ui

## Basic Information

- **Project Name**: MintUI
- **Description**: 基于Vue3的UI组件库,目前包含四个组件，完善中...
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://boheweb.gitee.io/mint-ui-website
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-07-10
- **Last Updated**: 2023-11-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, vite

## README

# MintUI
>Mint UI 是一款基于 Vue 3 和 TypeScript 的 UI 组件库。

这款组件库其实是我为了总结自己的技术经验而写的，全程亲手编写，尽量不采用第三方库，包括你现在看到的这个官网也几乎都是我自己写的。

所以如果强烈不建议你将此 UI 库用于生产环境。但如果你是抱着看源代码的目的来的，那么这个库还是值得一看的。源代码放在了 [Gitee](https://gitee.com/boheweb/mint-ui)历史提交信息非常规范，你可以按提交的顺序逐个查看；你也可以直接查看每个组件的源代码和示例，运行方法见 README.md。


#### 介绍
+ 基于Vue3
    + 使用了Vue3 Composition API
+ 基于Typescript
    + 源代码采用Typescript书写（非常严格）
+ 代码易读
    + 每个组件的源代码都极其简洁

#### 安装教程
打开终端运行下列命令：
```
npm install mint-ui-1
```
或
```
yarn add mint-ui-1
```

#### 使用说明
请先[安装]()本组件库。

然后在你的代码中写入下面的代码
## Vue 单文件组件

代码示例：

```html
<template>
  <div>
      <Button @click="open">按钮</Button>
  <hr />
  <Switch v-model:value="switchValue" />
  <hr />
  <Tabs v-model:selected="tabSelected">
    <Tab title="导航1">吃饭</Tab>
    <Tab title="导航2">睡觉</Tab>
    <Tab title="导航3">打豆豆</Tab>
  </Tabs>
  </div>
</template>

<script>
import { Button, Tabs, Tab, Switch, Dialog, openDialog } from "mint-ui-1";
import "mint-ui-1/dist/lib/mint.css";
export default {
  components: { Button, Tabs, Switch, Dialog },
   data() {
    return {
      switchValue: false,
      tabSelected: "导航1",
    };
  },
  methods: {
    open() {
      openDialog({
        title: "标题",
        content: "内容",
      });
    },
  },
}
</script>
```
就可以使用我提供的组件了。


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request