Co-creating the Vue Version of Arco Design Mobile / 共创 Arco Design Mobile 的 Vue 版本

[adaex]

Co-creating the Vue Version of Arco Design Mobile / 共创 Arco Design Mobile 的 Vue 版本

Background

After four years of development, the Arco Design Mobile component library has accumulated over 30 mature React components. However, the demand for Vue from the community is growing, and many issues have highlighted the expectation for Vue support. Therefore, we have decided to initiate the development of the Vue version, making it a key goal for future development.

经过四年的发展，Arco Design Mobile 组件库已经积累了超过 30 个成熟的 React 组件。然而，社区对 Vue 的需求日益增长，许多 Issue 也表明了大家对 Vue 支持的期望。为此我们决定启动 Vue 版本的开发，将其作为未来发展的重要目标之一。

Building the Vue version is a new challenge that requires a significant investment of time and effort. Since the current team members cannot fully commit to this project, we hope to leverage the power of the community to jointly advance the construction of the Vue version. At the same time, we aim to utilize the latest advancements in AI technology, such as GPT-4o, Gemini 1.5, Claude 3.5, and existing resources to assist everyone in completing this task.

构建 Vue 版本是一个全新的挑战，需投入大量时间和精力。由于团队现有成员无法全职参与这一项目，我们希望通过社区的力量，携手推进 Vue 版本的建设。同时，也希望借助 AI 技术的最新进步，如 GPT-4o、Gemini 1.5、Claude 3.5 等，利用现有的积累来协助大家完成这项任务。

Current Infrastructure Progress

Currently, the basic framework for the Vue version has been completed and successfully merged into the epic-vue branch. Our basic approach is as follows:

目前，Vue 版本的基础框架已经完成，并成功合入 epic-vue 分支。我们的基本思路如下：

• Project Structure: A new Vue sub-repo has been added to the existing monorepo, ensuring consistency with the React version's structure for easier maintenance and expansion.

  项目结构：在现有的 monorepo 中新增了一个 Vue 子 repo，确保与 React 版本的结构一致，便于维护和扩展。

• Function Reuse: tokens and common-widgets components are fully reused, and scripts are partially reused. This not only reduces redundant work but also ensures consistency between different versions.

  功能复用：完全复用了 tokens 和 common-widgets 组件，部分复用了 scripts。这不仅减少了重复工作，还确保了不同版本之间的一致性。

• Development Environment: A development environment suitable for Vue has been configured, including tools like ESLint and Prettier, to ensure code quality and style consistency.

  开发环境：配置了适用于 Vue 的开发环境，包括 ESLint、Prettier 等工具，以确保代码质量和风格的一致性。

• Build Tools: The documentation site uses Vite as the build tool to improve development efficiency and build speed while supporting modern JavaScript features.

  构建工具：文档站使用 Vite 作为构建工具，以提高开发效率和构建速度，同时支持现代 JavaScript 特性。

• Documentation and Examples: Detailed demos and example component codes are provided in the packages/arcodesign-vue directory.

  文档和示例：在 packages/arcodesign-vue 目录下提供了详细的 demo 和示例组件代码。

Please refer to the detailed changes in: #268
请查看详细的变更内容：#268

Application of AI Technology

After creating a new component branch, LLM technology can be used to automatically convert React code to Vue code. Although AI technology can accelerate the development process, the generated code still needs to be verified, adjusted, and optimized to ensure it meets production requirements.

在创建新组件分支后，可以利用 LLM 技术自动将 React 代码转化为 Vue 代码。尽管 AI 技术能够加速开发过程，生成的代码仍需经过验证、调整和优化，以确保其符合生产环境的要求。

Co-construction Method

We will adopt the Epic branch model to organize development work. After the development of each component is completed, it will be merged into the epic-vue branch, and once it reaches sufficient maturity, it will be merged into the master branch. This approach ensures the controllability and structure of the development process.

我们将采用 Epic 分支模式来组织开发工作。每个组件的开发完成后，将合入 epic-vue 分支，当达到足够的成熟度后，再整体合并到 master 分支。此方式确保开发过程的可控性和结构化。

Contribution Process

To make it clearer for everyone to participate, here is the detailed contribution process:

为了让大家更清晰地参与进来，以下是详细的贡献流程：

1. Fork the Repository: Fork the code from our GitHub repository to develop independently under your account.

   Fork 仓库：从我们的 GitHub 仓库中 fork 代码，以便在你的账户下独立开发。

2. Create a Branch: In the forked repository, create a new working branch based on epic-vue, naming it like feat-vue-[component-name] for easy identification.

   创建分支：在 fork 的仓库中，基于 epic-vue 创建新的工作分支，命名方式如 feat-vue-[组件名]，以便于识别。

3. Generate Base Code: After creating the branch, you can comment under the relevant issue and @adaex @TinaPeach @ziqisia to help you use AI to assist in generating initial code. Of course, you can also use your familiar LLM methods or techniques to generate base code. Note that AI-generated code is only for reference and requires further development and verification.

   生成基础代码：在分支创建后，你可以在相关 issue 下评论并 @adaex @TinaPeach @ziqisia，帮助你利用 AI 协助生成初步代码。当然，你也可以使用你熟悉的 LLM 方式或技巧来生成基础代码。请注意，AI 生成的代码仅作为参考，需要进一步开发和验证。

4. Development and Verification:

   开发与验证：

   • Develop and verify the initially generated code in detail to ensure it runs correctly in the Vue environment.

     对初步生成的代码进行详细的开发与验证，确保其能够在 Vue 环境下正常运行。

   • Refer to the existing React version to ensure functional consistency.

     参考现有的 React 版本，确保功能一致性。

   • Unit Testing: Write unit tests for each component to ensure the functionality and performance meet expectations.

     单元测试：为每个组件编写单元测试，确保组件的功能和性能符合预期。

   • Ensure the code complies with the project's code standards and passes all automated tests.

     确保代码符合项目的代码规范，并通过所有的自动化测试。

5. Submit PR: After development is complete, submit your work to the epic-vue branch via a Pull Request.

   提交 PR：开发完成后，将你的成果通过 Pull Request 提交到 epic-vue 分支。

   • In the PR description, detail the work done, test results, and any points of attention.

     在 PR 描述中详细说明所做的工作、测试结果以及任何需要注意的事项。

Claiming Mechanism and Progress Maintenance

If you are interested in contributing to the construction of Vue components, feel free to claim and contribute your efforts. You can claim a component by directly commenting under the Issue. We will update the status and maintain a table based on comments to keep other contributors and maintainers informed of progress. You can also update your progress at any time by commenting.

如果你对 Vue 组件的建设感兴趣，欢迎认领并贡献出自己的力量。认领组件可以直接在 Issue 下评论。我们会根据评论及时更新状态并维护表格，以便其他贡献者和维护者了解进展。你也可以随时通过评论方式同步你的进展情况。

Component	Contributor	Start Date	Progress	PR Link
Badge	@TinaPeach	2024-05-20	Done	#268
Cell	@TinaPeach	2024-05-20	Done	#268
Notify	@TinaPeach	2024-05-20	Done	#268
Button
Avatar
Image

---

We understand the enormity of the task, but we believe that with the collective effort of the community, the Vue version of Arco Design Mobile will live up to expectations! We look forward to your active participation and contribution!

我们深知任务的艰巨，但坚信在社区的共同努力下，Arco Design Mobile 的 Vue 版本将不负众望！期待你的积极参与与贡献！

If you have any other questions or need further assistance, please feel free to contact us.

如果有其他问题或需要进一步的帮助，请随时联系我们。