From b3718c4097b736c45e669495fee25ffd6a5d921f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BC=96=E7=A0=81=E7=8C=BF?= Date: Fri, 19 Sep 2025 13:01:26 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8F=92=E4=BB=B6=E7=9A=84?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=92=8C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 101 +++++++++--------- front-end/main-app/package.json | 1 + front-end/main-app/src/app/App.tsx | 6 +- .../main-app/src/app/components/Header.tsx | 51 ++++----- front-end/main-app/src/app/main.ts | 3 +- front-end/main-app/src/app/views/About.tsx | 8 +- front-end/main-app/src/app/views/Home.tsx | 53 +++++---- front-end/main-app/src/app/views/NotFound.tsx | 23 +++- .../main-app/src/shared/types/shims-vue.d.ts | 2 +- front-end/main-app/tsconfig.json | 2 - 10 files changed, 130 insertions(+), 120 deletions(-) diff --git a/README.md b/README.md index e40e961..3828191 100644 --- a/README.md +++ b/README.md @@ -91,8 +91,9 @@ src/ ```tsx // 首页 页面 -import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop' -import Header from '@/components/Header' +import { Component, Ref, Setup, Vue } from 'vue-facing-decorator' +import Header from '../components/Header' +import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-router"; interface ListItemType { id: number @@ -100,44 +101,52 @@ interface ListItemType { } @Component() -export default class Home extends VueComponent { +export default class Home extends Vue { - @Mut() - count: number = 1 + counter: number = 1; - @Mut() - text: string = "Home props 传给 Header 的字符串" + @Ref + readonly refH1!: HTMLDivElement + + @Setup((props, ctx) => useRouter()) + router!: Router + + @Setup((props, ctx) => useRoute()) + route!: RouteLocationNormalizedLoaded - @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) + addCount() { + // console.log("ref dom: ", this.refH1) + // this.router.push({ name: 'about' }) + // this.route.query + this.counter++ } + testHtml() { + return

测试html jsx 函数

+ } + + render() { return ( -
-

首页

-

count响应式变量（点我）：{ this.count }

+
+

首页

+

counter 响应式变量（点我）：{ this.counter }

+ { { default: () =>
父到子 default 插槽
, haveName: () =>
父到子 具名 插槽
, - item: (val) =>
  • { val.title }
    • + item: (val: ListItemType) =>
  • { val.title }
    • } } - list={ this.newList } - text={ this.text }>
    + { this.testHtml }
    ) } @@ -146,53 +155,43 @@ export default class Home extends VueComponent { ```tsx // 头部组件 -import { Component, ComponentProps, Hook, useProps, VueComponent } from 'vue3-oop' -import { JSX } from "vue/jsx-runtime"; -import { VNodeChild } from "vue"; +import { Component, Prop, TSX, Vue } from 'vue-facing-decorator' + +interface Props { + text?: string + list?: ListItemType[] +} interface ListItemType { id: number title: string } -interface HeaderProps { - text?: string; - list: ListItemType[] - slots: { - default: () => JSX.Element; - haveName: () => JSX.Element; - item: (val: ListItemType) => VNodeChild; - } -} - @Component() -export default class Header extends VueComponent { +export default class Header extends TSX()(Vue) implements Props { - // required 的 true or false 需要和 类型中 text的? 对应 - static defaultProps: ComponentProps = { - text: { default: '默认数值', required: true }, - list: { default: () => [] } - }; + @Prop({ default: '默认数值' }) + text!: string; - @Hook('Mounted') - mounted() { - console.log("this: ", this); - console.log('Header 组件的 mounted 生命周期...') + @Prop() + list!: ListItemType[]; + + created() { + console.log("created: ", this) } render() { - const { text, list } = useProps(); return (
    头部组件 -

    { text }

    - { this.context.slots.default?.() } - { this.context.slots.haveName?.() } +

    { this.text }

    + { this.$slots.default?.() } + { this.$slots.haveName?.() }
      { - list.map( + this.list.map( item => - this.context.slots.item?.(item) + this.$slots.item?.(item) ) }
    diff --git a/front-end/main-app/package.json b/front-end/main-app/package.json index e2eee58..06c857d 100644 --- a/front-end/main-app/package.json +++ b/front-end/main-app/package.json @@ -16,6 +16,7 @@ "dependencies": { "pinia": "^3.0.3", "vue": "^3.5.18", + "vue-facing-decorator": "^4.0.1", "vue-router": "^4.0.6" }, "devDependencies": { diff --git a/front-end/main-app/src/app/App.tsx b/front-end/main-app/src/app/App.tsx index 80192a8..525f809 100644 --- a/front-end/main-app/src/app/App.tsx +++ b/front-end/main-app/src/app/App.tsx @@ -1,8 +1,8 @@ -import { Component, VueComponent } from 'vue3-oop' +import { Component, Vue } from 'vue-facing-decorator' import { RouterLink, RouterView } from "vue-router"; @Component() -export class App extends VueComponent { +export default class App extends Vue { render() { return ( <> @@ -15,4 +15,4 @@ export class App extends VueComponent { ) } -} \ No newline at end of file +} diff --git a/front-end/main-app/src/app/components/Header.tsx b/front-end/main-app/src/app/components/Header.tsx index c865606..ef88e18 100644 --- a/front-end/main-app/src/app/components/Header.tsx +++ b/front-end/main-app/src/app/components/Header.tsx @@ -1,54 +1,45 @@ -import { Component, ComponentProps, Hook, useProps, VueComponent } from 'vue3-oop' -import { JSX } from "vue/jsx-runtime"; -import { VNodeChild } from "vue"; +import { Component, Prop, TSX, Vue } from 'vue-facing-decorator' + +interface Props { + text?: string + list?: ListItemType[] +} interface ListItemType { id: number title: string } -interface HeaderProps { - text?: string; - list: ListItemType[] - slots: { - default: () => JSX.Element; - haveName: () => JSX.Element; - item: (val: ListItemType) => VNodeChild; - } -} - @Component() -export default class Header extends VueComponent { +export default class Header extends TSX()(Vue) implements Props { - // required 的 true or false 需要和 类型中 text的? 对应 - static defaultProps: ComponentProps = { - text: { default: '默认数值', required: true }, - list: { default: () => [] } - }; + @Prop({ default: '默认数值' }) + text!: string; - @Hook('Mounted') - mounted() { - console.log("this: ", this); - console.log('Header 组件的 mounted 生命周期...') + @Prop() + list!: ListItemType[]; + + created() { + console.log("created: ", this) } render() { - const { text, list } = useProps(); return (
    头部组件 -

    { text }

    - { this.context.slots.default?.() } - { this.context.slots.haveName?.() } +

    { this.text }

    + { this.$slots.default?.() } + { this.$slots.haveName?.() }
      { - list.map( + this.list.map( item => - this.context.slots.item?.(item) + this.$slots.item?.(item) ) }
    ) } -} \ No newline at end of file +} + diff --git a/front-end/main-app/src/app/main.ts b/front-end/main-app/src/app/main.ts index a64118a..cd0d95e 100644 --- a/front-end/main-app/src/app/main.ts +++ b/front-end/main-app/src/app/main.ts @@ -2,10 +2,9 @@ import '@abraham/reflection' import { createApp } from 'vue' import { createPinia } from 'pinia' -import { App } from './App' +import App from './App' import router from './router' - class Main { constructor() { createApp(App) diff --git a/front-end/main-app/src/app/views/About.tsx b/front-end/main-app/src/app/views/About.tsx index 2ae82c5..8b87639 100644 --- a/front-end/main-app/src/app/views/About.tsx +++ b/front-end/main-app/src/app/views/About.tsx @@ -1,12 +1,12 @@ -import {Component, VueComponent} from 'vue3-oop' +import { Component, Vue } from 'vue-facing-decorator' @Component() -export default class About extends VueComponent { +export default class About extends Vue { render() { return (

    我的

    - ) - } + ) + } } \ No newline at end of file diff --git a/front-end/main-app/src/app/views/Home.tsx b/front-end/main-app/src/app/views/Home.tsx index 6414056..0879123 100644 --- a/front-end/main-app/src/app/views/Home.tsx +++ b/front-end/main-app/src/app/views/Home.tsx @@ -1,5 +1,6 @@ -import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop' -import Header from '@/components/Header' +import { Component, Ref, Setup, Vue } from 'vue-facing-decorator' +import Header from '../components/Header' +import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-router"; interface ListItemType { id: number @@ -7,44 +8,52 @@ interface ListItemType { } @Component() -export default class Home extends VueComponent { +export default class Home extends Vue { - @Mut() - count: number = 1 + counter: number = 1; - @Mut() - text: string = "Home props 传给 Header 的字符串" + @Ref + readonly refH1!: HTMLDivElement + + @Setup((props, ctx) => useRouter()) + router!: Router + + @Setup((props, ctx) => useRoute()) + route!: RouteLocationNormalizedLoaded - @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) + addCount() { + // console.log("ref dom: ", this.refH1) + // this.router.push({ name: 'about' }) + // this.route.query + this.counter++ } + testHtml() { + return

    测试html jsx 函数

    + } + + render() { return ( -
    -

    首页

    -

    count响应式变量（点我）：{ this.count }

    +
    +

    首页

    +

    counter 响应式变量（点我）：{ this.counter }

    + { { default: () =>
    父到子 default 插槽
    , haveName: () =>
    父到子 具名 插槽
    , - item: (val) =>
  • { val.title }
    • + item: (val: ListItemType) =>
  • { val.title }
    • } } - list={ this.newList } - text={ this.text }>
    + { this.testHtml }
    ) } diff --git a/front-end/main-app/src/app/views/NotFound.tsx b/front-end/main-app/src/app/views/NotFound.tsx index 5b05239..588d01e 100644 --- a/front-end/main-app/src/app/views/NotFound.tsx +++ b/front-end/main-app/src/app/views/NotFound.tsx @@ -1,11 +1,24 @@ -import { defineComponent } from 'vue' +// import { defineComponent } from 'vue' +// +// export default defineComponent({ +// setup() { +// return () => ( +//
    +//

    404

    +//
    +// ) +// } +// }) -export default defineComponent({ - setup() { - return () => ( +import { Component, Vue } from 'vue-facing-decorator' + +@Component() +export default class About extends Vue { + render() { + return (

    404

    ) } -}) \ No newline at end of file +} \ No newline at end of file diff --git a/front-end/main-app/src/shared/types/shims-vue.d.ts b/front-end/main-app/src/shared/types/shims-vue.d.ts index 6ad95a7..1a9fbc3 100644 --- a/front-end/main-app/src/shared/types/shims-vue.d.ts +++ b/front-end/main-app/src/shared/types/shims-vue.d.ts @@ -1,5 +1,5 @@ declare module '*.vue' { - import type {DefineComponent} from 'vue' + import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } diff --git a/front-end/main-app/tsconfig.json b/front-end/main-app/tsconfig.json index 50706f9..9c2c7a7 100644 --- a/front-end/main-app/tsconfig.json +++ b/front-end/main-app/tsconfig.json @@ -3,9 +3,7 @@ "target": "ESNext", "module": "ESNext", "importHelpers": true, - "isolatedModules": true, "experimentalDecorators": true, - "emitDecoratorMetadata": true, "useDefineForClassFields": false, "moduleResolution": "Bundler", "strict": true,