Element-Plus-X

深色模式

一、克隆仓库 ​

bash
git clone https://github.com/HeJiaYue520/Element-Plus-X.git
cd Element-Plus-X

二、安装依赖 ​

bash
pnpm install # 推荐使用 PNPM 管理依赖

三、项目结构 ​

  • docs 文档：由于该文档目前还存在架构问题，目前没有放在开源项目中，后续弄好会放在源码中开源

  • playground：暂定的代码测试及演示地方，项目初期，为了方便大家提交 pr ，也为了方便项目的简洁。不考虑做测试用例。

  • packages/components：组件库项目源码，在调试前需要 先构建此项目才能生效 ，或直接在 playground 的 演示 vue 文件中使用 文件 路经访问 该项目

    js
    // 在 playground/src/components/XXXDemo.vue 文件中
// 例如，这样用绝对路经引入就不需要构建，直接访问，每次热更新都能立马看到效果，方便你本地调试开发

import Bubble from 'vue-element-plus-x/src/components/Bubble/index.vue'

以下是主要的 项目目录结构 请先对照查看，方便你对项目目录有所了解

plaintext
├── .github                     # CI/CD 配置
├── apps
|   ├── docs                    # 文档源码（基于 VitePress）
|   ├── playground              # 演示源码
├── packages
│   └── components              # 组件源码
|       ├──.build               # 自动化构建处理
|       └──src
|          ├──— components      # 组件核心源码
|          |    ├── Bubble      # 气泡组件
|          |    ├── BubbleList  # 气泡列表
|          |    ├── sender      # 输入框
|          |    ├── Typewriter  # 打字器组件
|          |    └── ...         # 更多组件
|          └── hooks            # 核心 Hooks 源码
|
|
└── package.json                # 项目配置

四、开发命令 ​

请先构建好组件在执行预览

命令说明
pnpm build:components在本地构建生产版本
pnpm dev:playground启动组件测试使用预览
pnpm dev:docs本地预览文档 (文档暂未集成在开源中... 预计在 5月中旬会优化好项目架构，开源出来)

五、成为贡献者 ​

🥰 在提交 pr 之前，我们非常希望，也非常欢迎，你能加入我们的交流群。

😔 为了避免浪费你宝贵的时间。请先在交流群中沟通和讨论，和我们团队项目负责人取得联系，一起交流，确定好想做的功能，明确好要做的需求。

💌 提交 pr 后我们可以相互交流，互相学习。集思广益，改进 pr 方案，共同进步。期待你的加入

  1. 创建一个自己的分支：

    分支管理尤为重要，我们决定将 main 分支，作为上线的主分支，我们的 pr 提交，全部合并到 dev 开发分支。在创建 pr 后，我们会将先检查，哪些是较为有用的 pr ，当我们认可了你的提交后，我们会为你创建新的分支，将你的代码合并到该分支中，同时我们会将代码拉取，本地运行审核。如果有需要改进的地方，我们会及时向您反馈。如果我们审没有通过，也会给出相关的建议，请放心大胆的提交的想法和创意。

    bash
    git checkout -b feature/new-component (new-component 就是你的分支名)

  2. 代码规范：

    请在执行完开发命令后，安装并打开 Vs Code 的 ESLint 插件 使用 ESLint.9x 格式化代码（保存代码时自动检查）

    • 组件命名遵循 PascalCase 规范

    • 每个组件包含：

    plaintext
    ├── components      # 组件涉及到的子组件 （可选）
├── index.vue       # 组件实现
└── types.d.ts      # 类型定义

  3. 提交 PR：

    • 标题格式：feat(component): 新增打字机组件
    • 描述包含：功能说明、使用示例、变更影响

  4. 研究审核：

    🙋 再次提醒：我们会将先检查，哪些是有效的 pr ，当我们认可了你的提交后，我们会为你创建新的分支，将你的代码合并到该分支中，同时我们会将代码拉取，本地运行审核。如果有需要改进的地方，我们会及时向您反馈。如果我们审没有通过，也会给出相关的建议，请放心大胆的提交的想法和创意。

六、调试本地包 ​

在示例项目中链接本地代码：

bash
# 先本地构建
pnpm build:components

# 示例项目执行
pnpm dev:playground

七、常见问题 ​

  1. 样式冲突：

    • 确保没有重复引入 Element-Plus 样式
    • 使用 deep() 选择器覆盖组件样式

  2. 类型错误：

    • 暂无

  3. 语音功能异常：

    • 检查浏览器权限设置

  4. 版本问题：

    Vue 版本过低导致，请升级 Vue3.2+ 或最新版本

    pnpm 版本过低，请升级 10+ 或最新版本