目标：从零封装简易低代码组件库 ● 思考&分析如何实现一个低代码库 ● 开发Container, Panel, Table低代码组件（可拖拽可视化编辑） ● 可以基于Element-ui以及antd等框架 ● 参考https://juejin.cn/post/7100717291897094157#heading-0 使用技术：vue3、TypeScript、Element-Plus、vite 写出实现Container, Panel, Table低代码组件（可拖拽可视化编辑）的整个实现过程，将这个项目的实现步骤以及按步骤的代码详细写出来

实现一个低代码组件库的过程可以分为以下几个步骤：

步骤1：初始化项目
1. 创建一个新的vue3 + TypeScript项目，可以使用vite进行快速初始化。
2. 安装Element-Plus库，用于构建组件样式。
3. 配置基本的项目结构和依赖。

步骤2：创建可视化编辑器
1. 创建一个可视化编辑器的组件，用于拖拽和编辑组件。
2. 组件中通过监听mouse事件实现拖拽功能。
3. 通过组件的props传递组件数据，用于显示和编辑组件的属性。

步骤3：实现Container容器组件
1. 创建一个Container组件，用于容纳其他子组件。
2. 在Container组件中，通过插槽(slot)来动态渲染子组件。
3. 使用可视化编辑器将其他组件拖拽到Container中，并实现布局功能。

步骤4：实现Panel面板组件
1. 创建一个Panel组件，用于展示其他组件的属性和配置。
2. 在Panel中，使用表单元素或者其他控件来展示和编辑组件的属性。
3. 通过双向绑定(v-model)来实现属性的修改和同步。

步骤5：实现Table表格组件
1. 创建一个Table组件，用于展示数据表格。
2. 在Table组件中，通过props接收数据和配置。
3. 使用Element-Plus的Table组件来展示数据表格。

步骤6：使用组件库
1. 在主应用中引入自己开发的组件库。
2. 使用可视化编辑器，拖拽和配置各个组件。
3. 在页面中使用Container容器组件来布局其他组件。
4. 使用Panel面板组件来编辑和配置其他组件的属性。
5. 使用Table表格组件展示数据表格。

以上是一个实现低代码组件库的大致步骤，具体的代码实现过程和细节可以参考参考文章中的示例代码。希望对你有所帮助！