@orangechen/orange-ui v1.0.0

Orange UI

基于 Vue3 的轻量级组件库，支持按需导入。

安装

npm install @libc/orange-ui
# 或
yarn add @libc/orange-ui
# 或
pnpm add @libc/orange-ui

使用方式

Orange UI 采用源码直接导入的方式，每个组件都可以单独导入和注册，无需全量导入。

直接导入单个组件

<script setup>
// 直接从组件源文件导入
import { OAspectRatio } from "@libc/orange-ui/components/aspectRatio/index.ts"
import '@libc/orange-ui/style/aspectRatio.css' // 引入组件样式
</script>

<template>
  <OAspectRatio ratio="16:9">
    <!-- 内容 -->
  </OAspectRatio>
</template>

导入并手动注册组件

如果你不使用 <script setup>，可以这样注册组件：

import { createApp } from 'vue'
import { OCarousel } from "@libc/orange-ui/components/carousel/index.ts"
import '@libc/orange-ui/style/carousel.css'

const app = createApp(App)
app.use(OCarousel) // 每个组件都有install方法
app.mount('#app')

导入多个组件

<script setup>
// 导入轮播组件
import { 
  OCarousel, 
  OCarouselContent, 
  OCarouselItem 
} from "@libc/orange-ui/components/carousel/index.ts"
import '@libc/orange-ui/style/carousel.css'

// 导入卡片组件
import { 
  OCard, 
  OCardContent 
} from "@libc/orange-ui/components/card/index.ts"
import '@libc/orange-ui/style/card.css'
</script>

直接源码导入的优势

• 代码提示更完善：IDE能提供完整的类型提示
• 打包工具优化：现代打包工具可以更好地进行Tree-Shaking
• 更小的包体积：只会打包实际使用的代码
• 按需加载：只导入你需要的组件，不会引入无用代码

组件列表

• Carousel - 轮播组件
• Card - 卡片组件
• AspectRatio - 宽高比组件
• Button - 按钮组件
• ...更多组件