From 687154f0be9e461bfbeeb93e302342c192e47daa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BC=96=E7=A0=81=E7=8C=BF?= <www.2271608011@qq.com>
Date: Fri, 19 Sep 2025 03:16:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B8=AE=E5=8A=A9=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                     | 89 +++++++++--------------------------
 front-end/pnpm-workspace.yaml |  4 ++
 2 files changed, 26 insertions(+), 67 deletions(-)
 create mode 100644 front-end/pnpm-workspace.yaml

diff --git a/README.md b/README.md
index fd45107..8207295 100644
--- a/README.md
+++ b/README.md
@@ -206,7 +206,7 @@ export default class Header extends VueComponent<HeaderProps> {
 
 - [x] 基于DDD理念改造
 - [x] 基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端
-- [x] 基于Vue3+OOP+JSX改造项目代码，
+- [x] 基于Vue3+OOP+JSX改造项目代码
 - [ ] 领域模块实现 docker 自动化构建部署上线
 - [ ] Deno集成GraphQL
 
@@ -220,76 +220,31 @@ export default class Header extends VueComponent<HeaderProps> {
 
 答：https://juejin.cn/post/7141674726434439176
 
-**问：vue3 jsx defineComponent 语法，实际项目中 setup 代码太长，怎么办？**
+## 运行 & 打包
 
-答：使用组合式函数 (Composables)
+```bash
+# 1 下载代码
+git clone https://gitee.com/bmycode/dddmicro-frontend.git
 
-案例：
+# 2 运行后端
+cd back-end  # 进入 后端 文件夹
+deno install # 安装依赖
+deno run dev # 运行后端
 
-```jsx
-// composables/useUserData.js
-import {ref, onMounted} from 'vue'
-import api from '@/api'
+# 3 运行前端
+cd front-end  # 进入 前端 文件夹
+pnpm install  # 会同时为 所有模块 安装依赖
+pnpm add -g concurrently  # 全局安装 并发命令执行 插件，局部安装也行，随你。
+pnpm run all  # 构建 app-product 和 app-shared 并启动预览，并开发阶段启动 main-app 模块
+# 注意：命令跑完后 ctrl + c 停止，重跑一次！！因为子模块内命令并发执行预览跑在构建之前，解决办法很简单，后面再搞。
+pnpm run all 
+# 打开 main-app 主模块访问地址即可：[http://localhost:1300/](http://localhost:1300/)
 
-export function useUserData(userId) {
-    const user = ref(null)
-    const loading = ref(false)
-    const error = ref(null)
+# 4 部署上线
+pnpm run build:main # 构建并预览主应用，预览打包后的主应用，没问题，ctrl + c 停止。
+# 子模块在 第三步 已经打包好了，不需要重新打包了。
 
-    const fetchUser = async () => {
-        loading.value = true
-        try {
-            user.value = await api.getUser(userId)
-        } catch (err) {
-            error.value = err.message
-        } finally {
-            loading.value = false
-        }
-    }
+# 上传部署 各模块内的 dist/ 文件夹到服务器上，注意修改 vite.config.ts 内 plugins.federation.remotes.xxx 的地址！
+# 后期会实现集中管理 地址配置，并根据环境变量动态加载！！
 
-    onMounted(fetchUser)
-
-    return {
-        user,
-        loading,
-        error,
-        refetch: fetchUser
-    }
-}
-```
-
-主组件：
-
-```jsx
-// UserProfile.jsx
-import {defineComponent} from 'vue'
-import {useUserData} from '@/composables/useUserData'
-
-export default defineComponent({
-    name: 'UserProfile',
-
-    props: {
-        userId: {
-            type: String,
-            required: true
-        }
-    },
-
-    setup(props) {
-        const {user, loading, error, refetch} = useUserData(props.userId)
-
-        return () => (
-            <div>
-                {loading.value && <div>Loading...</div>}
-                {error.value && <div>Error: {error.value}</div>}
-                {user.value && (
-                    <div>
-                        <h2>{user.value.name}</h2>
-                        <p>{user.value.email}</p>
-                    </div>
-                )}
-            </div>
-        )
-    }
-})
 ```
\ No newline at end of file
diff --git a/front-end/pnpm-workspace.yaml b/front-end/pnpm-workspace.yaml
new file mode 100644
index 0000000..be660d2
--- /dev/null
+++ b/front-end/pnpm-workspace.yaml
@@ -0,0 +1,4 @@
+packages:
+  - 'main-app'
+  - 'app-product'
+  - 'app-shared'
\ No newline at end of file