基于Vue3+OOP+JSX改造项目代码，增加pnpm统一管理依赖

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

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

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

@@ -1,64 +1,54 @@
-import {defineComponent, onMounted, reactive} from 'vue'
+import {Autobind, Component, Link, Mut, VueComponent} from 'vue3-oop'
 import Header from '@/components/Header'
-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() {
+@Component()
+export default class Home extends VueComponent {
 
-    const counterStore = useCounterStore()
-    const { increment } = counterStore
-    const { count, doubleCount } = storeToRefs(counterStore)
+  @Mut()
+  count: number = 1
 
-    const state = reactive<stateType>({
-      list: [
-        { id: 1, title: '新闻1' },
-        { id: 2, title: '新闻2' },
-        { id: 3, title: '新闻3' },
-      ]
-    })
+  @Mut()
+  text: string = "Home props 传给 Header 的字符串"
+
+  @Mut()
+  newList: ListItemType[] = [
+    {id: 1, title: '新闻1'},
+    {id: 2, title: '新闻2'},
+    {id: 3, title: '新闻3'},
+  ]
+
+  @Link() H1?: HTMLDivElement
 
 
+  @Autobind()
+  async addCount() {
+    this.count++
+    this.text = "22222"
+    console.log(this.H1)
+  }
 
-    onMounted(() => {
-      // console.log("onMounted: ", HttpConfig.DevBaseUrl);
-      console.log("check: ", UrlCheckUtils.check())
-    })
+  render() {
+    return (
+        <div class="home" ref="H1">
+          <h1>首页</h1>
+          <p onClick={this.addCount}>count响应式变量（点我）：{this.count}</p>
+          <Header
+              v-slots={{
+                default: () => <div class="default">父到子 default 插槽</div>,
+                haveName: () => <div class="haveName">父到子 具名 插槽</div>,
+                item: (val) => <li key={val.id}>{val.title}</li>
+              }}
+              list={this.newList}
+              text={this.text}>
 
-    // 定义处理子组件事件的函数
-    const handleChildEvent = (message: string) => {
-      console.log('收到子组件事件：', message)
-    }
-
-
-    return () => (
-      <div class="home">
-        <Header
-          text={state.list}
-          onClick={() => {
-            console.log("通过props自定义事件传给子组件");
-          }}
-          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>
+          </Header>
+        </div>
     )
   }
-})
+}