基于Vue3+OOP+JSX改造项目代码，增加pnpm统一管理依赖
This commit is contained in:
编码猿
@@ -1,10 +1,10 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
import {Component, VueComponent} from 'vue3-oop'
|
||||
import {RouterLink, RouterView} from "vue-router";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
setup() {
|
||||
return () => (
|
||||
@Component()
|
||||
export class App extends VueComponent {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav">
|
||||
<RouterLink to="/">首页</RouterLink> |
|
||||
@@ -15,4 +15,4 @@ export default defineComponent({
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -1,59 +1,56 @@
|
||||
import { defineComponent, defineEmits, onMounted, PropType } from 'vue'
|
||||
import type { JSX } from "vue/jsx-runtime";
|
||||
import {Component, ComponentProps, Hook, useProps, VueComponent} from 'vue3-oop'
|
||||
import {JSX} from "vue/jsx-runtime";
|
||||
import {VNodeChild} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Header",
|
||||
props: {
|
||||
text: {
|
||||
type: Array<{ id: number, title: string }>,
|
||||
default: () => []
|
||||
},
|
||||
// 点击事件
|
||||
onClick: {
|
||||
type: Function as PropType<() => void>,
|
||||
default: () => { }
|
||||
}
|
||||
},
|
||||
emits: {
|
||||
sendMessage: (message: string) => typeof message === 'string'
|
||||
},
|
||||
interface ListItemType {
|
||||
id: number
|
||||
title: string
|
||||
}
|
||||
|
||||
setup(props, { attrs, slots, emit, expose }) {
|
||||
interface HeaderProps {
|
||||
text?: string;
|
||||
list: ListItemType[]
|
||||
slots: {
|
||||
default: () => JSX.Element;
|
||||
haveName: () => JSX.Element;
|
||||
item: (val: ListItemType) => VNodeChild;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log("onMounted")
|
||||
})
|
||||
@Component()
|
||||
export default class Header extends VueComponent<HeaderProps> {
|
||||
|
||||
const handleClick = () => {
|
||||
console.log("handleClick")
|
||||
emit('sendMessage', '子给父的数据')
|
||||
}
|
||||
// required 的 true or false 需要和 类型中 text的? 对应
|
||||
static defaultProps: ComponentProps<HeaderProps> = {
|
||||
text: {default: '默认数值', required: true},
|
||||
list: {default: () => []}
|
||||
};
|
||||
|
||||
const button = (): JSX.Element => {
|
||||
return <button onClick={handleClick}>父向子emit点我</button>
|
||||
}
|
||||
@Hook('Mounted')
|
||||
mounted() {
|
||||
console.log("this: ", this);
|
||||
console.log('Header 组件的 mounted 生命周期...')
|
||||
}
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<h1 onClick={props.onClick}>头部组件-点我</h1>
|
||||
|
||||
{button()}
|
||||
render() {
|
||||
const {text, list} = useProps<HeaderProps>();
|
||||
|
||||
{slots.default?.()}
|
||||
|
||||
{slots.header?.()}
|
||||
|
||||
<div class="ScopedSlots">
|
||||
<p>作用于插槽：</p>
|
||||
<ul>
|
||||
{
|
||||
props.text.map(item => {
|
||||
return slots.scoped?.(item)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
return (
|
||||
<div class="header">
|
||||
头部组件
|
||||
<p>{text}</p>
|
||||
{this.context.slots.default?.()}
|
||||
{this.context.slots.haveName?.()}
|
||||
<ul>
|
||||
{
|
||||
list.map(
|
||||
item =>
|
||||
this.context.slots.item?.(item)
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -1,13 +1,21 @@
|
||||
// import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App'
|
||||
import '@abraham/reflection'
|
||||
import {createApp} from 'vue'
|
||||
import {createPinia} from 'pinia'
|
||||
import {App} from './App'
|
||||
import router from './router'
|
||||
|
||||
createApp(App)
|
||||
.use(createPinia())
|
||||
.use(router)
|
||||
.mount('#app')
|
||||
|
||||
class Main {
|
||||
constructor() {
|
||||
createApp(App)
|
||||
.use(createPinia())
|
||||
.use(router)
|
||||
.mount('#app')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
new Main
|
||||
|
||||
|
||||
|
||||
25
front-end/main-app/src/app/router/Config.ts
Normal file
25
front-end/main-app/src/app/router/Config.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import {productRouter} from 'product/ProductRouter'
|
||||
import {RouteRecordRaw} from 'vue-router'
|
||||
|
||||
|
||||
const baseRouter: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/Home'),
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: () => import('../views/About'),
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('../views/NotFound')
|
||||
}
|
||||
];
|
||||
|
||||
// 聚合所有功能模块的路由
|
||||
const routes: RouteRecordRaw[] = [...baseRouter, ...productRouter];
|
||||
export default routes;
|
||||
@@ -1,27 +1,5 @@
|
||||
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
|
||||
import {productRouter} from 'product/ProductRouter'
|
||||
|
||||
|
||||
const baseRouter: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/Home'),
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: () => import('../views/About'),
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('../views/NotFound')
|
||||
}
|
||||
];
|
||||
|
||||
// 聚合所有功能模块的路由
|
||||
const routes: RouteRecordRaw[] = [...baseRouter, ...productRouter];
|
||||
import {createRouter, createWebHistory} from 'vue-router'
|
||||
import routes from './Config'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user