## DDD领域驱动设计的微服务前端案例

搭建的一套**基于DDD领域驱动设计的微服务前端**，适用于大型企业，开发大型复杂且拓展灵活的前端应用的架构方案。

> 微服务架构中，前端用什么语言不在受约束！

项目大致技术栈：
- [DDD领域驱动设计](https://zh.wikipedia.org/zh-cn/%E9%A0%98%E5%9F%9F%E9%A9%85%E5%8B%95%E8%A8%AD%E8%A8%88)
- [@originjs/vite-plugin-federation](https://www.npmjs.com/package/@originjs/vite-plugin-federation)
- [Deno](https://deno.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [GraphQL](https://graphql.org/)
- [docker](https://www.docker.com/)
- [drone](https://drone.cool/)
- [nginx](https://nginx.org/)
- [Vue3](https://cn.vuejs.org/)
- [Jsx](https://legacy.reactjs.org/docs/introducing-jsx.html)
- [Vite](https://cn.vite.dev/)
- [axios](https://axios-http.com/)


## 开发任务
- [ x ] 未完成任务

## 问 & 答 

问： 为什么vue项目要抛弃SFC写法而尝试jsx/tsx方式来编码？
答：https://juejin.cn/post/6911175470255964174


问：不会 vue3 jsx 语法，怎么办？
答：https://juejin.cn/post/7141674726434439176


问：vue3 jsx defineComponent 语法，实际项目中 setup 代码太长，怎么办？
答：使用组合式函数 (Composables) - 最推荐

案例：

```jsx
// composables/useUserData.js
import { ref, onMounted } from 'vue'
import api from '@/api'

export function useUserData(userId) {
  const user = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const fetchUser = async () => {
    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>
    )
  }
})
```