yg-packages

UDP 基础框架公共包聚合。使用 Vite library mode 将所有 @udp/* 和 @udp-core/* 源码打包为单个 npm 包，外部项目只需安装 yg-packages 即可使用全部框架能力，无需克隆 udp-web monorepo。

安装

npm install yg-packages
# 或
pnpm add yg-packages

使用方式

按路径引入（推荐）

每个 @udp/* 包都有对应的子路径，按需引入：

// 原 @udp/stores
import { useUserStore, useAccessStore, initStores } from 'yg-packages/stores';

// 原 @udp/request
import { RequestClient } from 'yg-packages/request';

// 原 @udp/hooks
import { useAppConfig } from 'yg-packages/hooks';

// 原 @udp/access
import { registerAccessDirective } from 'yg-packages/access';

// 原 @udp/component-ui
import { Table, Form, Dialog, useTable } from 'yg-packages/component-ui';

// 原 @udp/common-ui
import { registerLoadingDirective } from 'yg-packages/common-ui';

// 原 @udp/layouts
import { BasicLayout } from 'yg-packages/layouts';

// 原 @udp/icons
import { Icon } from 'yg-packages/icons';

// 原 @udp/utils
import { cloneDeep } from 'yg-packages/utils';

// 原 @udp/constants
import { DEFAULT_LAYOUT } from 'yg-packages/constants';

// 原 @udp/types
import type { RouteRecordRaw } from 'yg-packages/types';

// 原 @udp/preferences
import { preferences } from 'yg-packages/preferences';

// 原 @udp/locales
import { $t, setupI18n } from 'yg-packages/locales';

// 原 @udp/plugins
import { MotionPlugin } from 'yg-packages/plugins';

// 原 @udp/mask
import { registerMaskDirective } from 'yg-packages/mask';

// 原 @udp/tracking
import { tracking } from 'yg-packages/tracking';

// 原 @udp/ui
import { UdpUpload } from 'yg-packages/ui';

样式导入

样式已预编译为 CSS，需要显式导入：

// 设计令牌 + Element Plus 覆盖 + 全局样式（必须导入）
import 'yg-packages/styles';

// 也可以单独导入（styles 已包含以下内容）
// import 'yg-packages/core/design';  // 设计令牌

Core 子包

import { useComposables } from 'yg-packages/core/composables';
import { useFormUI } from 'yg-packages/core/form-ui';
import { CoreIcons } from 'yg-packages/core/icons';
import { LayoutUI } from 'yg-packages/core/layout-ui';
import { MenuUI } from 'yg-packages/core/menu-ui';
import { PopupUI } from 'yg-packages/core/popup-ui';
import { corePreferences } from 'yg-packages/core/preferences';
import { ShadcnUI } from 'yg-packages/core/shadcn-ui';
import { shared } from 'yg-packages/core/shared';
import { TabsUI } from 'yg-packages/core/tabs-ui';
import type { CoreTypings } from 'yg-packages/core/typings';

bootstrap.ts 完整示例

import { createApp } from 'vue';
import { registerAccessDirective } from 'yg-packages/access';
import { registerMaskDirective } from 'yg-packages/mask';
import { registerLoadingDirective } from 'yg-packages/common-ui';
import { preferences } from 'yg-packages/preferences';
import { initStores } from 'yg-packages/stores';

// 样式（必须导入，包含设计令牌 + Element Plus 覆盖）
import 'yg-packages/styles';

import { setupI18n } from 'yg-packages/locales';
import { router } from './router';
import { requestClient } from './api/request';
import App from './App.vue';

async function bootstrap() {
  const app = createApp(App);

  // 国际化
  await setupI18n(app);

  // 状态管理
  await initStores(app, { namespace: 'my-app' });

  // 权限指令
  registerAccessDirective(app);

  // 脱敏指令
  registerMaskDirective(app);

  // 路由
  app.use(router);

  app.mount('#app');
}

bootstrap();

对应关系

| 子路径 | 原始包 | 说明 | |--------|--------|------| | yg-packages | @udp/* 全量 | 综合导出 | | yg-packages/access | @udp/access | 权限控制 | | yg-packages/common-ui | @udp/common-ui | 通用 UI 组件 | | yg-packages/component-ui | @udp/component-ui | 业务组件 | | yg-packages/constants | @udp/constants | 常量定义 | | yg-packages/hooks | @udp/hooks | 组合式函数 | | yg-packages/icons | @udp/icons | 图标 | | yg-packages/layouts | @udp/layouts | 布局组件 | | yg-packages/locales | @udp/locales | 国际化 | | yg-packages/mask | @udp/mask | 脱敏 | | yg-packages/plugins | @udp/plugins | 插件（motion/echarts/vxe-table） | | yg-packages/preferences | @udp/preferences | 偏好设置 | | yg-packages/request | @udp/request | 请求封装 | | yg-packages/stores | @udp/stores | 状态管理 | | yg-packages/styles | @udp/styles | 样式（CSS 副作用导入） | | yg-packages/tracking | @udp/tracking | 追踪 | | yg-packages/types | @udp/types | 类型定义 | | yg-packages/ui | @udp/ui | UI 组件 | | yg-packages/utils | @udp/utils | 工具函数 | | yg-packages/core/composables | @udp-core/composables | 核心组合式函数 | | yg-packages/core/design | @udp-core/design | 设计令牌（CSS） | | yg-packages/core/form-ui | @udp-core/form-ui | 表单 UI | | yg-packages/core/icons | @udp-core/icons | 核心图标 | | yg-packages/core/layout-ui | @udp-core/layout-ui | 布局 UI | | yg-packages/core/menu-ui | @udp-core/menu-ui | 菜单 UI | | yg-packages/core/popup-ui | @udp-core/popup-ui | 弹窗 UI | | yg-packages/core/preferences | @udp-core/preferences | 核心偏好 | | yg-packages/core/shadcn-ui | @udp-core/shadcn-ui | Shadcn UI | | yg-packages/core/shared | @udp-core/shared | 共享工具 | | yg-packages/core/tabs-ui | @udp-core/tabs-ui | 标签页 UI | | yg-packages/core/typings | @udp-core/typings | 核心类型 |

内联打包的依赖

以下依赖已内联打包到 dist 中，消费者无需安装：

| 包名 | 原因 | |------|------| | vxe-pc-ui、vxe-table、xe-utils | CJS 依赖链 | | lodash.clonedeep、lodash.get、lodash.isequal、lodash.set | CJS-only | | nprogress、secure-ls、vue-json-viewer | CJS-only | | qrcode | CJS-only | | @vue/shared | pnpm 严格隔离下需显式声明，内联避免问题 |

Peer Dependencies

使用前请确保项目中已安装：

npm install vue@^3.5 @vue/shared@^3.5 vue-router@^4.5 pinia@^3 element-plus@^2.13
npm install @vueuse/core @vueuse/motion axios dayjs echarts vue-i18n
npm install @element-plus/icons-vue @iconify/vue radix-vue lucide-vue-next
npm install @vueuse/integrations vuedraggable vue-tippy cropperjs
npm install class-variance-authority clsx tailwind-merge @ctrl/tinycolor
npm install sortablejs tippy.js watermark-js-plus qs
npm install vee-validate zod @vee-validate/zod zod-defaults
npm install @tanstack/vue-store @wangeditor-next/editor @wangeditor-next/editor-for-vue
npm install wang-editor-next-plugin-import-from-word theme-colors

完整 peerDependencies 列表见 package.json。

Vite 配置注意事项

消费端建议在 vite.config.ts 中排除 pre-bundle：

export default defineConfig({
  optimizeDeps: {
    exclude: ['yg-packages'],
  },
});

在 udp-web monorepo 内部开发时，admin 已通过 resolve.alias 将 yg-packages 指向源码目录，无需额外配置。

构建

cd udp-web/yg-packages
pnpm build

构建使用 Vite library mode，将 packages/ 下的源码通过 alias 解析并打包。产物包含：

• .js 文件（ESM 格式，实际代码，非透传）
• .css 文件（预编译的样式）
• .d.ts 文件（TypeScript 类型声明）

注意： 构建依赖 udp-web monorepo 的 packages/ 目录（通过 vite alias）。dist 产物本身完全自包含，不依赖 packages/。

发布

# 1. 确保已登录 npm
npm login

# 2. 构建最新 dist
pnpm build

# 3. 发布
npm publish --access public

版本变更记录

| 版本 | 变更 | |------|------| | v0.1.0 | 修复 dist 被 unbuild stub 覆盖的关键问题（删除 stub 脚本）；内联 @vue/shared | | v0.0.8 | 内联打包 vxe-pc-ui、vxe-table、xe-utils、nprogress、secure-ls、qrcode、vue-json-viewer、lodash.*；Preferences reactive() 改为 lazy getter | | v0.0.3+ | 构建工具从 unbuild 切换为 Vite library mode，dist 为实际打包代码而非透传 |