修改文件结构

front-end/main-app/src/app/views/About.tsx

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: "About",
+  setup() {
+    return () => (
+      <div class="about">
+        <h1>我的</h1>
+      </div>
+    )
+  }
+})

front-end/main-app/src/app/views/Home.tsx

@@ -0,0 +1,60 @@
+import { defineComponent, reactive, onMounted } from 'vue'
+import Header from '@/components/Header'
+import { HttpConfig } from '@shared/config/index'
+import { UrlCheckUtils } from '@shared/utils'
+import { useCounterStore } from '@/stores/counter'
+import { storeToRefs } from 'pinia'
+
+interface stateType {
+  list: ListItemType[]
+}
+
+interface ListItemType {
+  id: number
+  title: string
+}
+
+export default defineComponent({
+  name: "Home",
+  setup() {
+
+    const counterStore = useCounterStore()
+    const { increment } = counterStore
+    const { count, doubleCount } = storeToRefs(counterStore)
+
+    const state = reactive<stateType>({
+      list: [
+        { id: 1, title: '新闻1' },
+        { id: 2, title: '新闻2' },
+        { id: 3, title: '新闻3' },
+      ]
+    })
+
+
+
+    onMounted(() => {
+      // console.log("onMounted: ", HttpConfig.DevBaseUrl);
+      console.log("check: ", UrlCheckUtils.check())
+    })
+
+    // 定义处理子组件事件的函数
+    const handleChildEvent = (message: string) => {
+      console.log('收到子组件事件：', message)
+    }
+
+
+    return () => (
+      <div class="home">
+        <Header text={state.list} onSendMessage={handleChildEvent}>
+          {{
+            scoped: (item: ListItemType) => <li key={item.id}>{item.title}</li>,
+            header: () => <div class="header">父到子 具名 插槽</div>,
+            default: () => <div class="default">父到子 default 插槽</div>
+          }}
+        </Header>
+        <h1>首页</h1>
+        <div class="count" onClick={increment}>点我+1：{count.value}</div>
+      </div>
+    )
+  }
+})

front-end/main-app/src/app/views/NotFound.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    setup() {
+        return () => (
+            <div class="404">
+                <h1>404</h1>
+            </div>
+        )
+    }
+})