开始

欢迎使用 Ting UI 预览地址：https://ting-code.github.io/Ting-UI-Vue3/dist/index.html#/

介绍

Ting UI 是一个简洁的前端 UI 框架，基于 vue3.0 的开源 UI 组件库, 由Ting 开发使用vite2 vue3.0 typescript搭建。
Ting UI框架主要用于学习vue3.0新特性，请勿用于生产环境！欢迎各位与作者Ting 交流学习

PS: 该文档网页适配移动端和PC

版本:0.0.10

• 更新内容: 初次完成简单组件

版本:0.0.15

• 更新内容: 添加Grid组件

版本:0.0.20

• 更新内容: 添加Layout组件

版本:0.0.21

• 更新内容: 添加Toast组件

版本:0.0.30

• 更新内容: 添加Popover组件

版本:0.0.50

• 更新内容: 添加Collapse组件

版本:0.0.60

• 更新内容: 添加Menu组件

版本:0.1.0

• 更新内容: 发布初版

安装

打开终端运行下列命令：

npm install vue3-ting-ui

或

yarn add vue3-ting-ui

快速使用

完整引入

import 'vue3-ting-ui/dist/lib/ting.css'
import { createApp } from 'vue'
import App from './App.vue'
import { TingUI } from 'vue3-ting-ui'

const app = createApp(App)
app.use(TingUI)
app.mount('#app')

以上代码便完成了 Ting-ui 的引入。需要注意的是，样式文件需要单独引入。

按需引入

如果你只希望引入部分组件，比如 Button ，那么需要在 main.js 中写入以下内容：

import 'vue3-ting-ui/dist/lib/ting.css'
    import { createApp } from 'vue'
    import { Button: t-button } from 'vue3-ting-ui'
    import App from './App.vue'

    createApp(App).use(t-button).mount('#app')