组件库全文件解构
组件库全文件解构
Breezli项目结构
1 | 这是一个组件库项目，技术栈：Vue 3 + TypeScript + Vite，测试工具：Vitest + Storybook，打包工具：Rollup + Vue-Test-Utils，项目部署：VitePress站点生成 + GitHubPages页面托管 + github actions CI/CD 自动化部署 |
项目解构
1 | ctrl+i |
├─ .nvmrc
1 | v18.17.0 |
控制nodejs版本的
├─ env.d.ts
用来区分不同的运行环境：生产（production）、开发（development）和测试（test）
1 | declare const PROD: boolean; //生产 |
在项目的构建脚本或配置文件中，会依据这些变量来决定是否启用某些调试工具、日志记录或者优化措施。
- 生产环境 (Production):
- 情景: 当你构建并部署你的应用到生产服务器上时（例如通过 CI/CD 流程自动部署到 GitHub Pages 或者其他任何生产环境）。假设你在 Vite 配置文件中为生产环境设置了
PROD=true。 - 操作: 执行构建命令如
npm run build后，再将生成的静态资源部署到生产环境。 - 结果: 在启动或加载应用程序的过程中，如果该函数被执行，那么将会看到那个带有渐变色效果的ASCII艺术logo出现在服务器日志或者浏览器控制台中。
- 情景: 当你构建并部署你的应用到生产服务器上时（例如通过 CI/CD 流程自动部署到 GitHub Pages 或者其他任何生产环境）。假设你在 Vite 配置文件中为生产环境设置了
- 开发模式 (Development):
- 情景: 当你在本地开发环境中运行你的Vue 3 + TypeScript项目时，比如使用
npm run serve或者类似的命令启动一个热重载的开发服务器。 - 操作: 直接在终端执行
npm run serve或者配置好的开发模式启动脚本。 - 结果: 在控制台中你会看到简单的提示消息
[EricUI]:dev mode...，这表明现在正处于开发模式下，并且可以快速识别出当前的工作状态。
- 情景: 当你在本地开发环境中运行你的Vue 3 + TypeScript项目时，比如使用
- 测试环境 (Testing):
- 情景: 运行单元测试或集成测试时（例如使用 Vitest），通常不会设置
PROD或DEV变量为 true。因此，在这种情况下，既不满足生产环境也不满足开发模式的条件。 - 操作: 执行测试命令如
npm test或vitest。 - 结果: 控制台上不会显示上述的ASCII艺术logo或开发模式的消息，以避免干扰测试输出。
- 情景: 运行单元测试或集成测试时（例如使用 Vitest），通常不会设置
├─ libs
辅助库&工具
├─ vite-plugins
自定义vite插件
├─ hooksPlugin.ts
├─ index.ts
├─ package.json
└─ vite.config.ts
└─ vitepress-preview-component
vitepress组件预览插件
├─ container
│ │ ├─ ant-design-ui
│ │ │ ├─ ant-design.scss
│ │ │ └─ AntDesign.vue
│ │ ├─ element-plus
│ │ │ ├─ element-plus.scss
│ │ │ └─ ElementPlus.vue
│ │ └─ naive-ui
│ │ ├─ naive-ui.scss
│ │ └─ NaiveUI.vue
│ ├─ hooks
│ │ ├─ use-codecopy.ts
│ │ ├─ use-codefold.ts
│ │ └─ use-namespaces.ts
│ ├─ icons
│ │ ├─ code-close.vue
│ │ ├─ code-copy.vue
│ │ ├─ code-open.vue
│ │ └─ copy-success.vue
│ ├─ index.ts
│ ├─ messages
│ │ ├─ index.ts
│ │ ├─ message-notice.scss
│ │ └─ message-notice.vue
│ ├─ package.json
│ ├─ styles
│ │ └─ various.scss
│ ├─ tsconfig.json
│ ├─ types.d.ts
│ └─ vite.config.ts
├─ packages
项目分包
├─ components
所有的组件逻辑
├─ Alert
提示
–API–
| Name | Description | Type | Default |
|---|---|---|---|
| title | Alert 标题 | string |
— |
| type | Alert 类型 | enum - 'success'| 'warning'| 'danger'| 'info' |
info |
| description | 描述性文本 | string |
— |
| closable | 是否可以关闭 | boolean |
true |
| center | 文字是否居中 | boolean |
false |
| show-icon | 是否展示图标 | boolean |
false |
| effect | 主题样式 | enum - 'light'| 'dark'\ |
light |
| Name | Description | Type |
|---|---|---|
| close | 关闭 Alert 时触发的事件 | (event: MouseEvent)=> void |
| Name | Description |
|---|---|
| default | 默认插槽，用于设置 Alert 的内容描述 |
| title | 标题的内容 |
| Name | Description | Type |
|---|---|---|
| open | 打开 Alert | () => void |
| close | 关闭 Alert | () => void |
├─ Alert.test.tsx
1 | import { describe, it, expect, vi } from "vitest"; |
├─ Alert.vue
1 | <script setup lang="ts"> |
├─ index.ts
1 | import Alert from "./Alert.vue"; |
├─ style.css
1 | .er-alert { |
└─ types.ts
1 | export type AlertType = "success" | "info" | "warning" | "danger"; |
├─ Button
–API–
├─ Button.test.tsx
单组件测试
1 | import { describe, it, expect } from 'vitest' //vitest 是测试框架，提供 describe（定义测试套件）、it（定义单个测试用例）、expect（断言工具） |
├─ Button.vue
组件实现
1 | <script setup lang="ts"> |
├─ ButtonGroup.vue
1 | <script setup lang="ts"> |
├─ constants.ts
1 | import type { InjectionKey } from "vue"; |
举个例子
1 | //父组件 |
1 | //子组件 |
├─ index.ts
用
withInstall方法将组件注册为全局组件
1 | import Button from "./Button.vue"; |
├─ style.css
1 |
└─ types.ts
1 | import { type Component, type ComputedRef, type Ref } from 'vue' |
├─ Collapse
折叠面板
–API–
├─ Collapse.test.tsx
1 | import { beforeAll, describe, expect, test, vi } from "vitest"; |
├─ Collapse.vue
1 | <script setup lang="ts"> |
├─ CollapseItem.vue
1 | <script setup lang="ts"> |
├─ constants.ts
1 | import type { InjectionKey } from "vue"; |
├─ index.ts
1 | import Collapse from "./Collapse.vue"; |
├─ style.css
1 | .er-collapse { |
├─ transitionEvents.ts
1 | const _setHeightZero = (el: HTMLElement) => (el.style.height = "0px"); |
└─ types.ts
1 | import type { Ref } from "vue"; |
├─ ConfigProvider
全局配置组件，用于设置组件库的全局属性
–API–
├─ ConfigProvider.vue
1 | <script setup lang="ts"> |
├─ constants.ts
1 |
|
├─ hooks.ts
1 | import { |
├─ index.ts
1 | import ConfigProvider from "./ConfigProvider.vue"; |
└─ types.ts
1 | import type { Language, TranslatePair } from "@eric-ui/locale"; |
├─ Dropdown
下拉菜单
–API–
├─ constants.ts
1 | import type { InjectionKey } from "vue"; |
├─ Dropdown.test.tsx
1 | import { describe, it, test, expect, vi, beforeEach } from "vitest"; |
├─ Dropdown.vue
1 | <script setup lang="ts"> |
├─ DropdownItem.vue
1 | <script setup lang="ts"> |
├─ index.ts
1 | import Dropdown from "./Dropdown.vue"; |
├─ style.css
1 | .er-dropdown .er-dropdown__menu { |
└─ types.ts
1 | import type { VNode, ComputedRef } from "vue"; |
├─ Form
表单，用于收集用户输入
–API–
├─ constants.ts
1 | import type { InjectionKey } from "vue"; |
├─ Form.vue
1 | <script setup lang="ts"> |
├─ FormItem.vue
1 | <script setup lang="ts"> |
├─ hooks.ts
1 | import { |
├─ index.ts
1 | import Form from "./Form.vue"; |
├─ style.css
1 | .er-form-item { |
└─ types.ts
1 | import type { |
├─ Icon
图标组件
├─ Icon.vue
1 | <script setup lang="ts"> |
├─ index.ts
1 | import Icon from "./Icon.vue"; |
├─ style.css
1 | .er-icon { |
└─ types.ts
1 | import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; |
├─ Input
输入框组件, 接收用户输入
–API–
├─ index.ts
1 | import Input from "./Input.vue"; |
├─ Input.test.tsx
1 | import { describe, expect, test } from "vitest"; |
├─ Input.vue
1 | <script setup lang="ts"> |
├─ style.css
1 | .er-input { |
└─ types.ts
1 | import type { Ref } from "vue"; |
├─ Loading
显示加载状态
–API–
├─ directive.ts
1 | import { type Directive, type DirectiveBinding, type MaybeRef } from "vue"; |
├─ index.ts
1 | import { vLoading } from "./directive"; |
├─ Loading.test.tsx
1 | import { describe, it, expect } from "vitest"; |
├─ Loading.vue
1 | <script setup lang="ts"> |
├─ service.ts
1 | import type { LoadingOptions, LoadingOptionsResolved } from "./types"; |
├─ style.css
1 | .er-loading { |
└─ types.ts
1 | import type { MaybeRef } from "vue"; |
├─ Message
顶部消息弹出框
–API–
├─ index.ts
1 | import Message from "./methods"; |
├─ Message.test.tsx
1 | import { describe, test, expect } from "vitest"; |
├─ Message.vue
1 | <script setup lang="ts"> |
├─ methods.ts
1 | import type { |
├─ style.css
1 | .er-message { |
└─ types.ts
1 | import type { VNode, ComponentInternalInstance } from "vue"; |
├─ MessageBox
中心弹出框
–API–
├─ index.ts
1 | import MessageBox from "./methods"; |
├─ MessageBox.test.tsx
1 | import { describe, it, expect, vi } from "vitest"; |
├─ MessageBox.vue
1 | <script setup lang="ts"> |
├─ methods.ts
1 | import { |
├─ style.css
1 | .er-message-box { |
└─ types.ts
1 | import { type Ref, type VNode } from "vue"; |
├─ Notification
角落弹出通知框
–API–
├─ index.ts
1 | import Notification from "./methods"; |
├─ methods.ts
1 | import type { |
├─ Notification.test.tsx
1 | import { describe, test, expect } from "vitest"; |
├─ Notification.vue
1 | <script setup lang="ts"> |
├─ style.css
1 | .er-notification { |
└─ types.ts
1 | import type { VNode, ComponentInternalInstance } from "vue"; |
├─ Overlay
遮罩层组件，用于覆盖页面内容
–API–
├─ Overlay.vue
1 | <script setup lang="ts"> |
└─ types.ts
1 | export interface OverlayProps { |
├─ Popconfirm
气泡确认框
–API–
├─ index.ts
1 | import Popconfirm from "./Popconfirm.vue"; |
├─ Popconfirm.test.tsx
1 | import { describe, it, test, expect, vi, beforeEach } from "vitest"; |
├─ Popconfirm.vue
1 | <script lang="ts" setup> |
├─ style.css
1 | .er-popconfirm { |
└─ types.ts
1 | import type { ButtonType } from "../Button"; |
├─ Select
下拉选择框组件，用于从一组选项中选择一个或多个值
–API–
├─ constants.ts
1 | import type { InjectionKey } from "vue"; |
├─ index.ts
1 | import Select from "./Select.vue"; |
├─ Option.vue
1 | <script setup lang="ts"> |
├─ Select.vue
1 | <script setup lang="ts"> |
├─ style.css
1 | .er-select { |
├─ types.ts
1 | import type { VNode, ComputedRef } from "vue"; |
└─ useKeyMap.ts
1 | import type { Ref, ComputedRef } from "vue"; |
├─ Switch
开关组件，用于在两种状态之间切换
–API–
├─ index.ts
1 | import Switch from "./Switch.vue"; |
├─ style.css
1 | .er-switch { |
├─ Switch.test.tsx
1 | import { describe, it, expect } from 'vitest'; |
├─ Switch.vue
1 | <script setup lang="ts"> |
└─ types.ts
1 | import type { ComputedRef } from "vue"; |
├─ Tooltip
hover文字提示, 显示额外的信息
–API–
├─ index.ts
1 | import Tooltip from "./Tooltip.vue"; |
├─ style.css
1 | .er-tooltip { |
├─ Tooltip.test.tsx
1 | import { describe, test,it, expect, vi, beforeEach } from "vitest"; |
├─ Tooltip.vue
1 | <script setup lang="ts"> |
├─ types.ts
1 | import type { Placement, Options } from "@popperjs/core"; |
└─ useEventsToTiggerNode.ts
1 | import { each, isElement } from "lodash-es"; |
├─ Upload
上传组件，用于上传文件
–API–
├─ index.ts
1 | import Upload from "./Upload.vue"; |
├─ types.ts
1 | export type UploadFileStatus = "ready" | "uploading" | "success" | "error"; |
├─ Upload.vue
1 | <script setup lang="ts"> |
└─ UploadList.vue
1 | <script setup lang="ts"> |
├─ index.test.ts
1 | import type { Plugin } from "vue"; |
├─ index.ts
1 | export * from './ConfigProvider' |
└─ package.json
项目依赖
无
开发依赖
axios：HTTP 客户端（用于测试或示例）。
├─ constants
常量系统
├─ index.ts
├─ key.ts
└─ package.json
项目依赖
空包
开发依赖
axios：HTTP 客户端（用于测试或示例）。
├─ core
核心包托管模式
npm包的入口，同时作为 components 的唯一出口
负责聚合所有子模块（如
components,hooks,theme,utils等）的功能，并提供给外部使用
├─ build
构建入口
放vite的两个配置文件
├─ vite.es.config.ts
ES Module 构建
1 | import { defineConfig } from "vite"; |
└─ vite.umd.config.ts
UMD 构建
1 | import { defineConfig } from "vite"; |
├─ componens.ts
集中导出组件
1 | import { ErButton, ErButtonGroup } from '@tyche/components' |
将组件注册为 Vue 插件，用户通过
app.use(Tyche)可以一次性安装所有组件。
├─ index.ts
1 | import { library } from "@fortawesome/fontawesome-svg-core"; |
├─ makeInstaller.ts
全局注册+构建配置
插件安装器：将组件集合转换为 Vue 插件，并支持全局配置（如主题、国际化）
1 | export default function makeInstaller(components: Plugin[]) { |
- 防止重复安装插件。
- 通过
app.use注册所有组件。- 支持全局配置（如通过
provideGlobalConfig提供主题或默认选项）。
├─ package.json
项目依赖
@fortawesome/fontawesome-svg-core@fortawesome/free-solid-svg-icons@fortawesome/vue-fontawesome@popperjs/coreasync-validator
开发依赖
@rollup/plugin-terser：Rollup 压缩插件rollup-plugin-visualizer：打包分析插件vite-plugin-compression：文件压缩插件
项目元数据与依赖管理：定义构建目标、入口文件、依赖关系等
1 | { |
/// 补充：peerDependencies ///
1 | ├── helloWorld |
packageA 核心依赖库被重复下载
此时我们应该在
plugin1 /package.json & plugin2 /package.json
1 | { |
/package.json
1 | { |
结构就变成了
1 | ├── helloWorld |
通常用于库或插件，这些库或插件不直接包含在最终应用中，但需要与其他包协同工作
当你安装一个包时，如果该包有peerDependencies，npm或yarn会检查这些依赖是否已经安装在项目中，如果没有，它会给出警告，但不会默认安装它们
└─ pringLogo.ts
构建时输出 Logo 和提示信息：在生产环境构建时打印彩色 Logo，在开发环境提示当前模式。
1 | export default function () { |
├─ docs
组件库项目文档，vitepress站点
├─ .vitepress
├─ config.ts
└─ theme
└─ index.ts
├─ components
├─ alert.md
├─ button.md
├─ collapse.md
├─ dropdown.md
├─ form.md
├─ loading.md
├─ message.md
├─ messagebox.md
├─ notification.md
├─ popconfirm.md
└─ tooltip.md
├─ demo
├─ alert
├─ Basic.vue
├─ Close.vue
├─ Desc.vue
├─ IconDesc.vue
├─ ShowIcon.vue
├─ TextCenter.vue
└─ Theme.vue
├─ button
├─ Basic.vue
├─ Disabled.vue
├─ Group.vue
├─ Icon.vue
├─ Loading.vue
├─ Size.vue
├─ Tag.vue
└─ Throttle.vue
├─ collapse
├─ Accordion.vue
├─ Basic.vue
├─ CustomTitle.vue
└─ Disabled.vue
│ │ │ ├─ dropdown
├─ Basic.vue
├─ Command.vue
├─ Disabled.vue
├─ HideOnClick.vue
├─ InstanceMethod.vue
├─ Size.vue
├─ SplitButton.vue
└─ Trigger.vue
├─ form
├─ Basic.vue
├─ CustomValidate.vue
├─ Position.vue
└─ Validate.vue
├─ loading
├─ Basic.vue
├─ Custom.vue
└─ Fullscreen.vue
├─ message
├─ Basic.vue
├─ Center.vue
├─ Closeable.vue
├─ Test.vue
└─ Type.vue
├─ messagebox
├─ Alert.vue
├─ Center.vue
├─ Confirm.vue
├─ Custom.vue
├─ Prompt.vue
└─ VNode.vue
├─ notification
├─ Basic.vue
├─ Closeable.vue
└─ Type.vue
├─ popconfirm
├─ Basic.vue
├─ Callback.vue
└─ Custom.vue
└─ tooltip
├─ Basic.vue
├─ Disabled.vue
└─ Slot.vue
├─ get-started.md
├─ index.md
└─ package.json
依赖（dependencies）
无（通过根目录继承）。
开发依赖（devDependencies）
@vitepress-demo-preview/component：VitePress 组件预览插件@vitepress-demo-preview/plugin：VitePress 插件vitepress：文档框架
├─ hooks
钩子函数, 自定义的 Vue 组合式 API
逻辑复用, 用于处理各种功能需求
├─ index.ts
hooks的入口文件，导出所有 API
1 | import useClickOutside from "./useClickOutside"; |
├─ package.json
依赖
无
peerDependencies（必须由用户安装）
vue：Vue 3 核心库lodash-es：Lodash 的 ES 模块版本
├─ useClickOutside.ts
监听用户是否点击了某个 DOM 元素之外的区域
实现 下拉菜单、弹窗 等需要点击外部关闭的功能
1 | import { type Ref } from 'vue' |
├─ useDisabledStyle.ts
动态控制组件的禁用样式
可以根据
disabled属性动态添加或移除样式类
1 | import { each, isFunction, cloneDeep, assign } from "lodash-es"; |
├─ useEventListener.ts
封装了一个通用的 事件监听器
支持在组件生命周期内
自动绑定和解绑事件
避免内存泄漏
1 | import { |
├─ useFocusController.ts
对焦点的管理功能
聚焦某个元素或在多个元素之间切换焦点
1 | import { isFunction } from "lodash-es"; |
├─ useId.ts
生成唯一的 ID
通常用于组件内部需要唯一标识符的场景
1 | import { type Ref, computed } from "vue"; |
├─ useLocale.ts
提供国际化（i18n）支持
动态获取当前语言环境下的文本内容
1 | import { inject, type Ref } from "vue"; |
├─ useOffset.ts
计算某个 DOM 元素相对于视口或其他父级元素的偏移量
实现 悬浮层、**弹出框 **等需要精确定位的功能
1 | import { type Ref, computed } from "vue"; |
├─ useProp.ts
封装了对组件
props的处理逻辑
提供更安全的默认值和类型检查
1 | import { computed, getCurrentInstance, type ComputedRef } from "vue"; |
├─ useZIndex.ts
管理弹窗的
z-index层级,确保组件的层级关系正确
如 弹窗、**加载遮罩 **等
1 | import { computed, ref } from "vue"; |
├─ vite.config.ts
1 | import { resolve } from "path"; |
└─ test
测试文件
├─ index.test.tsx
对
hooks入口文件的单元测试
1 | import { describe, expect, it } from "vitest"; |
├─ useClickOutset.test.tsx
对
useClickOutside的单元测试
验证其点击外部区域的行为是否符合预期
1 | import { describe, expect, it, vi } from "vitest"; |
└─ useEventListener.test.tsx
对
useEventListener的单元测试
验证事件监听器的绑定和解绑是否正常
1 | import { describe, expect, it, vi } from "vitest"; |
├─ locale
国际化
├─ index.ts
├─ lang
语言包
├─ en.ts
├─ ja.ts
├─ ko.ts
├─ zh-cn.ts
└─ zh-tw.ts
└─ package.json
空包
├─ play
storybook实验室
├─ .storybook
├─ main.js
└─ preview.js
├─ index.html
├─ public
└─ vite.svg
├─ src
├─ App.vue
├─ main.ts
├─ stories
├─ Alert.stories.tsx
├─ Button.stories.ts
└─ Collapse.stories.ts
└─ vite-env.d.ts
├─ vite.config.ts
├─ README.md
└─ package.json
项目依赖
无，通过根目录继承
开发依赖
@chromatic-com/storybook：Chromatic 截图测试工具@storybook/addon-*：Storybook 的扩展插件@storybook/vue3：Storybook 的 Vue 3 支持@storybook/vue3-vite：Storybook 的 Vite 集成@vitejs/plugin-vue：Vite 的 Vue 插件chromatic：Chromatic 命令行工具storybook：Storybook 核心
├─ theme
样式系统
样式构建流程集中在
core包采用 核心包托管模式
theme包仅作为源码存在
├─ index.css
├─ package.json
项目依赖
无
└─ reset.css
└─ utils
工具函数和辅助方法，支持组件库的底层逻辑
├─ error.ts
错误处理相关的工具函数
例如 抛出错误、捕获异常 等
1 | import { isString } from "lodash-es"; |
├─ index.ts
导出公共类型或接口
1 | import { defineComponent } from "vue"; |
├─ install.ts
给install附加一些方法和对象
1 | import type { App, Plugin, Directive } from "vue"; |
使用举例
1 | export const ErButton = withInstall(Button); |
├─ package.json
依赖
无
├─ style.ts
处理动态样式或 CSS 变量
1 | import { isNumber, isString } from "lodash-es"; |
└─ tests
├─ error.test.tsx
对
error.ts的单元测试，验证错误处理逻辑是否正确
1 | import {describe,expect,it,vi} from 'vitest' |
├─ index.test.tsx
对
utils入口文件的单元测试
1 | import { describe, expect, it } from "vitest"; |
└─ install.test.tsx
对
install.ts的单元测试，验证组件注册逻辑是否正常
1 | import { describe, expect, it } from "vitest"; |
├─ package.json
根目录依赖
1 | { |
开发依赖
vue3-i18n：Vue 国际化库
1 | 总结 |
1 | pnpm ls <package-name> # 查看依赖树 |
├─ pnpm-lock.yaml
环境🔒
├─ pnpm-workspace.yaml
PNPM 工作区的配置文件，用于管理多个包之间的依赖关系
1 | packages: |
所有位于
packages目录下的子目录都被视为独立的包，并且是工作区的一部分同样的，
libs目录下的子目录也被视为独立的包，被视为工作区的一部分
如果你有一个包在
packages文件夹中依赖了另一个位于libs文件夹中的包，PNPM 不会从远程仓库下载该依赖，而是创建一个符号链接指向该本地包的位置。
当你在一个工作区内的任意一个包中安装依赖时，PNPM 会将这些依赖安装在工作区根目录下的
node_modules文件夹内。工作区内所有的包可以共享相同的依赖版本，减少了重复安装和存储空间的浪费
├─ postcss.config.cjs
PostCSS 是一个使用 JavaScript 转换 CSS 的工具
该文件是 PostCSS 的配置文件
详情见文档 PostCSS中文网 或 Github/postcss
1 | /* eslint-env node */ |
├─ tsconfig.build.json
1 |
├─ tsconfig.json
TypeScript 编译器的配置文件，定义如何编译项目中的 TypeScript 文件
1 | { |
├─ tsconfig.node.json
专门为 Node.js 环境下的 TypeScript 配置文件
1 | { |
├─ vitest.config.ts
Vitest 测试框架的配置文件
1 | /// <reference types="vitest" /> //引用类型声明:告诉TypeScript编译器包含Vitest的类型定义 |
└─ vitest.setup.ts
通常用于在运行测试之前执行一些初始化逻辑
在这个项目中，初始化 FontAwesome 图标库，整个测试过程中使用 Solid 风格的图标
1 | import { library } from "@fortawesome/fontawesome-svg-core"; |
避免了由于图标未加载而导致的测试失败
扩展
1 | import { library } from '@fortawesome/fontawesome-svg-core' |
各工作区依赖环境详情
根目录
- 生产环境依赖
- @tyche/components: workspace:*
- @tyche/hooks: workspace:*
- @tyche/theme: workspace:*
- @tyche/utils: workspace:*
- @tyche/locale: workspace:*
- @tyche/constants: workspace:*
- @tyche/vite-plugins: workspace:*
- @fortawesome/fontawesome-svg-core: ^6.5.2
- @fortawesome/free-solid-svg-icons: ^6.5.2
- @fortawesome/vue-fontawesome: ^3.0.8
- @popperjs/core: ^2.11.8
- @vitepress-preview/component: workspace:*
- async-validator: ^4.2.5
- eric-ui: workspace:*
- lodash-es: ^4.17.21
- vue: ^3.4.27
- 开发环境依赖
- @types/lodash-es: ^4.17.12
- @types/node: ^20.12.12
- @types/shelljs: ^0.8.15
- @vitejs/plugin-vue: ^5.0.4
- @vitejs/plugin-vue-jsx: ^3.1.0
- @vitest/coverage-v8: ^1.4.0
- @vue/test-utils: ^2.4.5
- @vue/tsconfig: ^0.5.1
- cross-env: ^7.0.3
- cssnano: ^7.0.1
- jsdom: ^24.0.0
- npm-run-all: ^4.1.5
- postcss-color-mix: ^1.1.0
- postcss-each: ^1.1.0
- postcss-each-variables: ^0.3.0
- postcss-for: ^2.1.1
- postcss-nested: ^6.0.1
- prettier: ^3.2.5
- rollup: ^4.18.0
- shelljs: ^0.8.5
- typescript: ^5.4.5
- vite: ^5.2.11
- vite-plugin-dts: ^3.9.1
- vitest: ^1.6.0
- vue-tsc: ^1.8.27
- vue3-i18n: ^1.1.5
/packages/utils
- 生产环境依赖: 无明确声明
- 开发环境依赖
- 无（仅包含一个测试脚本）
/packages/components
- 生产环境依赖
- axios: ^1.6.8 (在 devDependencies 中, 可能是误置)
- 开发环境依赖
- 无明确声明（除了 axios 外）
/packages/constants
- 生产环境依赖: 无
- 开发环境依赖: 无
/packages/core
- 生产环境依赖
- @fortawesome/fontawesome-svg-core: ^6.5.1
- @fortawesome/free-solid-svg-icons: ^6.5.1
- @fortawesome/vue-fontawesome: ^3.0.6
- @popperjs/core: ^2.11.8
- async-validator: ^4.2.5
- 开发环境依赖
- @rollup/plugin-terser: ^0.4.4
- rollup-plugin-visualizer: ^5.12.0
- terser: ^5.31.0
- vite-plugin-compression: ^0.5.1
/packages/docs
- 生产环境依赖: 无
- 开发环境依赖
- @vitepress-demo-preview/component: ^2.3.2
- @vitepress-demo-preview/plugin: ^1.2.3
- vitepress: 1.1.4
/packages/hooks
- 生产环境依赖: 无
- 开发环境依赖
- 无（但有 peerDependencies）
- peerDependencies:
- vue: ^3.4.27
- lodash-es: ^4.17.21
/packages/locale
- 生产环境依赖: 无
- 开发环境依赖: 无
/packages/play
- 生产环境依赖: 无
- 开发环境依赖: 无
/packages/theme
- 生产环境依赖: 无
- 开发环境依赖
- @chromatic-com/storybook: 1.3.3
- @storybook/addon-essentials: ^8.0.10
- @storybook/addon-interactions: ^8.0.10
- @storybook/addon-links: ^8.0.10
- @storybook/blocks: ^8.0.10
- @storybook/test: ^8.0.10
- @storybook/vue3: ^8.0.10
- @storybook/vue3-vite: ^8.0.10
- @vitejs/plugin-vue: ^5.0.4
- chromatic: ^11.3.1
- storybook: ^8.0.10
1 | 请注意，对于 `/packages/components`，其中 `axios` 被放置在 `devDependencies` 中，这可能是错误配置，除非它确实只用于开发环境。此外，某些包如 `/packages/hooks` 使用了 `peerDependencies` 来定义其对其他包的依赖关系，这些依赖需要由使用者提供。 |
