microvideo-ui-lib

MicroVideo UI 组件库 - 一套基于 Vue 3 的动画和 UI 组件集合。

安装

npm install microvideo-ui-lib
# 或
yarn add microvideo-ui-lib
# 或
pnpm add microvideo-ui-lib

依赖

确保项目已安装以下 peerDependencies：

npm install vue@^3.5.25 gsap@^3.14.2 @ant-design/icons-vue@^7.0.1 @vueuse/core@^14.1.0

使用方式

全局引入

import { createApp } from 'vue'
import MicroVideoUI from 'microvideo-ui-lib'
import 'microvideo-ui-lib/dist/microvideo-ui-lib.css'

const app = createApp(App)
app.use(MicroVideoUI, {
  size: 'default',  // small | default | large
  theme: 'light'    // light | dark
})

按需引入

import { GradientBackground, NumberTicker, WavyBackground } from 'microvideo-ui-lib'
import 'microvideo-ui-lib/dist/microvideo-ui-lib.css'

export default {
  components: {
    GradientBackground,
    NumberTicker,
    WavyBackground
  }
}

组件列表

| 组件名 | 说明 | |--------|------| | GradientBackground | 渐变背景组件 | | LightLinePanel | 光线边框面板 | | Marquee | 跑马灯组件 | | NeuralBg | 神经网络背景 | | NumberFlip | 数字翻转组件 | | NumberTicker | 数字滚动组件 | | Orbit | 轨道动画组件 | | PathMove | 路径移动组件 | | PathTool | 路径工具组件 | | ProgressBar | 进度条组件 | | RadiantText | 辐射文字组件 | | WavyBackground | 波浪背景组件 |

组件使用示例

GradientBackground

<template>
  <MicroVideoGradientBackground :colors="['#ff0000', '#00ff00', '#0000ff']">
    <div class="content">内容区域</div>
  </MicroVideoGradientBackground>
</template>

NumberTicker

<template>
  <MicroVideoNumberTicker :value="12345" :duration="1000" />
</template>

WavyBackground

<template>
  <MicroVideoWavyBackground :wave-color="'rgba(0, 100, 200, 0.5)'">
    <div class="content">波浪背景内容</div>
  </MicroVideoWavyBackground>
</template>

开发

# 安装依赖
npm install

# 开发模式构建
npm run dev

# 生产构建
npm run build

# 代码检查
npm run lint

发布

# 构建
npm run build

# 发布到 npm
npm publish --access public

License

MIT © MicroVideo Team