Vue Amazing UI

一个 Vue 3 组件库

使用 TypeScript，都是单文件组件 (SFC)，支持 tree shaking

有点意思

English | 中文

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

文档

Vue Amazing UI

特性

• 组件库采用 Vue@3.5.13+ TypeScript@5.7.3 + Vite@6.1.0 + Less@4.2.2 实现
• 目前共包含 65 个基础 UI 组件以及 16 个工具函数，并且持续探索更新中...
• 顺便一提，它们全都可以 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

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用组件

全局完整注册（不推荐）

失去 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')

        

          
        
        
        

          

          AI 代码解读
        
      
      

全局部分注册

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

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('#app')

        

          
        
        
        

          

          AI 代码解读
        
      
      

局部注册组件

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

<script setup lang="ts">
import {
    Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'
</script>
<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

        

          
        
        
        

          

          AI 代码解读
        
      
      

全局部分注册和局部注册组件，都需手动引入组件库全局默认样式（推荐使用自动按需引入）

import {
    createApp } from 'vue'
import App from './App.vue'
import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

自动按需引入（强烈推荐）

使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式

pnpm add unplugin-vue-components -D
# or
npm install unplugin-vue-components -D
# or
yarn add unplugin-vue-components -D
# or
bun add unplugin-vue-components -D

        

          
        
        
        

          

          AI 代码解读
        
      
      

// vite.config.ts
import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
// vue-amazing-ui 按需引入
import {
    VueAmazingUIResolver } from 'vue-amazing-ui'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    vue(),
    Components({
   
      resolvers: [
        // auto import components from VueAmazingUI
        VueAmazingUIResolver({
   
          cjs: false // whether use commonjs build, default false
        })
      ]
    })
  ]
})

        

          
        
        
        

          

          AI 代码解读
        
      
      

然后，你可以在代码中直接使用 vue-amazing-ui 的所有组件

<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用类型

所有类型均可直接从 vue-amazing-ui 中引入使用，无需任何额外安装

<script setup lang="ts">
import {
    ref } from 'vue'
import type {
    ButtonProps } from 'vue-amazing-ui'
const shape = ref<ButtonProps['shape']>('default')
</script>
<template>
  <Button :shape="shape">button</Button>
</template>

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用工具函数

<script setup lang="ts">
import {
   
  dateFormat,
  formatNumber,
  rafTimeout,
  cancelRaf,
  throttle,
  debounce,
  add,
  downloadFile,
  toggleDark,
  useEventListener,
  useMutationObserver,
  useScroll,
  useFps,
  useMediaQuery,
  useResizeObserver,
  useSlotsExist
} from 'vue-amazing-ui'
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

项目

• 获取项目代码

git clone https://github.com/themusecatcher/vue-amazing-ui.git

        

          
        
        
        

          

          AI 代码解读
        
      
      

• 安装依赖

cd vue-amazing-ui

pnpm i

        

          
        
        
        

          

          AI 代码解读
        
      
      

• 启动项目

pnpm dev

        

          
        
        
        

          

          AI 代码解读
        
      
      

• 启动文档

pnpm docs:dev

        

          
        
        
        

          

          AI 代码解读
        
      
      

博客

My CSDN Blogs

赞助

Vue Amazing UI 是采用 MIT 许可的开源项目，使用完全免费。组件库及文档所有工作均由作者一人完成，开发迭代过程实属不易...为了组件库的健康可持续发展，非常期望能获得您的支持与赞助。

成为赞助者

赞助者 🫡

所有的赞助者都将出现在此处，非常感谢你们的支持与赞助 ❤️❤️

组件

工具函数