Vue Amazing UI 组件库（Vue3+TypeScript+Vite 等最新技术栈开发）

置顶

theMuseCatcher

已于 2025-03-13 15:22:54 修改

阅读量1.5k

点赞数 13

分类专栏： Vue3 TypeScript Less 文章标签： typescript vue3 ui components vite

于 2025-01-06 11:22:34 首次发布

本文链接：https://blog.csdn.net/Dandrose/article/details/144565948

版权

在这里插入图片描述

Vue Amazing UI

一个 Vue 3 组件库

主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking

有点意思

English | 中文

Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库，包含丰富的 UI 组件和常用工具函数，并且持续不断维护更新中。另外，组件库主题可调，全量使用 TypeScript和 SFC，支持自动按需引入和 Tree Shaking 等，能够显著提升开发效率，降低开发成本。

文档

Vue Amazing UI

特性

组件库采用 Vue@3.5.13+ TypeScript@5.8.2 + Vite@6.2.1 + Less@4.2.2 实现
目前共包含 66 个基础 UI 组件以及 17 个工具函数，并且持续探索更新中…
顺便一提，它们全都可以 treeshaking
主题可调，你只需提供一个主题色，剩下的都交给我
Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接
全部组件均采用单文件组件 SFC 风格，可独立使用
开箱即用，不墨迹

安装

pnpm add vue-amazing-ui
# or
npm install vue-amazing-ui
# or
yarn add vue-amazing-ui
# or
bun add vue-amazing-ui

使用组件

全局完整注册（不推荐）

失去 tree-shaking 的能力，打包后有冗余代码

import {
    createApp } from 'vue'
import App from './App.vue'
import VueAmazingUI from 'vue-amazing-ui'
import 'vue-amazing-ui/css'

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

全局部分注册

这种情况下，只有导入的组件才会被打包

import {
    createApp } from 'vue'
import App from './App.vue'
import {
    Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'

const app = createApp(App)
app.use(Button).use(Tag)
app.mount(