bmy/DDDMicroFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改插件的实现和文档

Browse Source
This commit is contained in:
编码猿
2025-09-19 13:01:26 +08:00
parent 79a0c9a451
commit b3718c4097
10 changed files with 130 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
README.md
View File

@@ -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 <p>测试html jsx 函数</p>
}
render() {
return (
<div class="home" ref="H1">
<h1>首页</h1>
<p onClick={ this.addCount }>count响应式变量（点我）：{ this.count }</p>
<div class="home">
<h1 ref="refH1">首页</h1>
<p onClick={ this.addCount }>counter 响应式变量（点我）：{ this.counter }</p>
<Header
v-slots={ {
list={ this.newList }
text={ "测试" }>
{ {
default: () => <div class="default">父到子 default 插槽</div>,
haveName: () => <div class="haveName">父到子 具名 插槽</div>,
item: (val) => <li key={ val.id }>{ val.title }</li>
item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
} }
list={ this.newList }
text={ this.text }>
</Header>
{ this.testHtml }
</div>
)
}
@@ -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<HeaderProps> {
export default class Header extends TSX<Props>()(Vue) implements Props {
// required 的 true or false 需要和 类型中 text的? 对应
static defaultProps: ComponentProps<HeaderProps> = {
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<HeaderProps>();
return (
<div class="header">
头部组件
<p>{ text }</p>
{ this.context.slots.default?.() }
{ this.context.slots.haveName?.() }
<p>{ this.text }</p>
{ this.$slots.default?.() }
{ this.$slots.haveName?.() }
<ul>
{
list.map(
this.list.map(
item =>
this.context.slots.item?.(item)
this.$slots.item?.(item)
)
}
</ul>

1
front-end/main-app/package.json
View File

@@ -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": {

4
front-end/main-app/src/app/App.tsx
View File

@@ -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 (
<>

49
front-end/main-app/src/app/components/Header.tsx
View File

@@ -1,50 +1,40 @@
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<HeaderProps> {
export default class Header extends TSX<Props>()(Vue) implements Props {
// required 的 true or false 需要和 类型中 text的? 对应
static defaultProps: ComponentProps<HeaderProps> = {
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<HeaderProps>();
return (
<div class="header">
头部组件
<p>{ text }</p>
{ this.context.slots.default?.() }
{ this.context.slots.haveName?.() }
<p>{ this.text }</p>
{ this.$slots.default?.() }
{ this.$slots.haveName?.() }
<ul>
{
list.map(
this.list.map(
item =>
this.context.slots.item?.(item)
this.$slots.item?.(item)
)
}
</ul>
@@ -52,3 +42,4 @@ export default class Header extends VueComponent<HeaderProps> {
)
}
}

3
front-end/main-app/src/app/main.ts
View File

@@ -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)

4
front-end/main-app/src/app/views/About.tsx
View File

@@ -1,7 +1,7 @@
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 (
<div class="about">

53
front-end/main-app/src/app/views/Home.tsx
View File

@@ -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 <p>测试html jsx 函数</p>
}
render() {
return (
<div class="home" ref="H1">
<h1>首页</h1>
<p onClick={ this.addCount }>count响应式变量（点我）：{ this.count }</p>
<div class="home">
<h1 ref="refH1">首页</h1>
<p onClick={ this.addCount }>counter 响应式变量（点我）：{ this.counter }</p>
<Header
v-slots={ {
list={ this.newList }
text={ "测试" }>
{ {
default: () => <div class="default">父到子 default 插槽</div>,
haveName: () => <div class="haveName">父到子 具名 插槽</div>,
item: (val) => <li key={ val.id }>{ val.title }</li>
item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
} }
list={ this.newList }
text={ this.text }>
</Header>
{ this.testHtml }
</div>
)
}

23
front-end/main-app/src/app/views/NotFound.tsx
View File

@@ -1,11 +1,24 @@
import { defineComponent } from 'vue'
// import { defineComponent } from 'vue'
//
// export default defineComponent({
// setup() {
// return () => (
// <div class="404">
// <h1>404</h1>
// </div>
// )
// }
// })
export default defineComponent({
setup() {
return () => (
import { Component, Vue } from 'vue-facing-decorator'
@Component()
export default class About extends Vue {
render() {
return (
<div class="404">
<h1>404</h1>
</div>
)
}
})
}

2
front-end/main-app/tsconfig.json
View File

@@ -3,9 +3,7 @@
"target": "ESNext",
"module": "ESNext",
"importHelpers": true,
"isolatedModules": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"useDefineForClassFields": false,
"moduleResolution": "Bundler",
"strict": true,