qiuui-vue

qiuui-vue

自研 Vue3 组件库（独立可发布包，不含业务基座 dizuo-ui）。

基于 Vue3 + Element Plus + Vite Library Mode 构建，内部通过 src/bridge/@ 轻量桥接层自包含， 不依赖主应用的 store / config / api。

注意：发布到 npm / 安装时使用的包名是 qiuui-vue（不是 qiu-ui）。

安装

pnpm add qiuui-vue
# 或 npm i qiuui-vue

使用（qiuui-vue 调用法）

在应用入口 main.ts 中一次性安装组件库：

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import { setupQiu } from 'qiuui-vue'
import 'qiuui-vue/dist/qiuui-vue.css'   // 组件库样式
import 'qiuui-vue/styles/qiu.scss'      // 三套主题(plain/dark/technology)与变量

const app = createApp(App)
app.use(ElementPlus)
app.use(setupQiu)          // 全局注册全部组件 + $qiuMsg / $qiuNotify 等助手
app.mount('#app')

执行 app.use(setupQiu) 后，所有组件（如 <qiu-button>、<qiu-table>、<qiu-color-picker>） 在任意 .vue 文件中无需 import 即可直接使用：

<template>
  <qiu-button type="primary">按钮</qiu-button>
  <qiu-color-picker v-model="color" clearable />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const color = ref('#1675fe')
</script>

也可按需显式引入单个组件：

import { QiuButton, QiuColorPicker, qiuMsg, qiuNotify } from 'qiuui-vue'

发布到 npm

cd web/qiu-ui
pnpm install        # 首次需允许 esbuild/vue-demi 等构建脚本（见 pnpm-workspace.yaml allowBuilds）
pnpm run build      # 产出 dist/
npm publish --access public

发布内容由 package.json 的 files 控制：dist / styles / components / src。

组件文档

每个组件目录下均带有 README.md，例如 components/QiuColorPicker/README.md， 内含该组件的安装、调用方式、Props、Events、完整示例。

注意事项

• peerDependencies：vue、element-plus、@vueuse/core 由消费方提供，库本身不打包这些依赖。
• 主题入口为 styles/qiu.scss（包含 dark / plain / technology 三套主题）。technology 主题中 登录/注册页背景原依赖基座资源，已改为使用主题变量 --el-background-technology，组件库不再引用任何基座图片。
• QiuCalculator 组件内含 eval（数学公式计算），构建会有安全警告，不影响产物功能，后续可替换为安全表达式解析器。
• 媒体播放相关配置（media.config）在库内为轻量占位实现，真实调度逻辑应在消费方覆盖对应 bridge。