修改帮助文档

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
+# 3 运行前端
-// composables/useUserData.js
+cd front-end  # 进入 前端 文件夹
-import {ref, onMounted} from 'vue'
+pnpm install  # 会同时为 所有模块 安装依赖
-import api from '@/api'
+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) {
+# 4 部署上线
-    const user = ref(null)
+pnpm run build:main # 构建并预览主应用，预览打包后的主应用，没问题，ctrl + c 停止。
-    const loading = ref(false)
+# 子模块在 第三步 已经打包好了，不需要重新打包了。
-    const error = ref(null)
 
-    const fetchUser = async () => {
+# 上传部署 各模块内的 dist/ 文件夹到服务器上，注意修改 vite.config.ts 内 plugins.federation.remotes.xxx 的地址！
-        loading.value = true
+# 后期会实现集中管理 地址配置，并根据环境变量动态加载！！
-        try {
-            user.value = await api.getUser(userId)
-        } catch (err) {
-            error.value = err.message
-        } finally {
-            loading.value = false
-        }
-    }
 
-    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>
-        )
-    }
-})
 ```

front-end/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - 'main-app'
+  - 'app-product'
+  - 'app-shared'