Vue Flow 快速入门和最佳实践

? Preface

? 序言

The immense popularity of large language models (LLMs) in 2023 looks set to continue this year. Following OpenAI's groundbreaking releases of GPT-3 and subsequent iterations, LLMs have become the cutting edge in natural language processing. Numerous tech firms and developers are racing to bring their own LLM offerings to market, capitalizing on intense interest in this burgeoning field. Harnessing the power of LLMs appears to be the wise course forward for those seeking to remain at the forefront of AI capabilities. ?

2023年大型语言模型（LLM）的巨大流行看起来将在今年继续。继OpenAI发布了GPT-3和随后的迭代之后，LLM已成为自然语言处理的前沿技术。许多科技公司和开发者正在竞相推出自己的LLM产品，利用对这一新兴领域的浓厚兴趣。利用LLM的力量似乎是那些希望保持在AI能力前沿的人明智的选择。?

My employer has opted to develop its own product in this sphere, integrating proprietary APIs across the organization. The workflow chart constitutes the crux of this endeavor, empowering users to tailor personalized processes. In the following article, I will illuminate the pivotal steps to constructing such workflow diagrams within web interfaces. It is my sincere aspiration that these insights provide some modicum of assistance to readers pursuing similar objectives. ?

我的雇主选择在这个领域开发自己的产品，将专有的API整合到整个组织中。工作流程图是这项努力的核心，使用户能够定制个性化流程。在下面的文章中，我将阐明在Web界面中构建此类工作流程图的关键步骤。我真诚地希望这些见解能对追求类似目标的读者提供一些帮助。?

? Finding the Right Workflow Library

? 寻找合适的工作流程库

At my present employer, the predominant front-end technology stack comprises Vue3 and TypeScript. Consequently, I sought out a workflow library grounded in Vue3 and ideally authored in TypeScript. Despite utilizing LogicFlow previously, its integration with Vue3 proved insufficiently seamless.Therefore, for this demonstration, I opted for VueFlow, which boasts exceptional support for Vue3.

在我目前的雇主那里，主要的前端技术栈包括Vue3和TypeScript。因此，我寻找了一个基于Vue3并且最好是用TypeScript编写的工作流库。尽管之前使用过LogicFlow，但它与Vue3的集成不够无缝。因此，为了这个演示，我选择了VueFlow，它对Vue3有出色的支持。

⚙️ Core Capabilities to Implement

⚙️ 实施的核心能力

1. ? Drag & Drop Elements to Create New Nodes
2. ? 拖放元素以创建新节点
3. ? Customizing Nodes
4. ? 自定义节点
5. ➡️ Connect Nodes with Drag-Based Edges
6. ➡️ 使用拖动创建...