Skip to content

Commit 26e1930

Browse files
agileagoagileago
committed
文档: 增加项目架构例子
1 parent 250046b commit 26e1930

File tree

13 files changed

+182
-246
lines changed

13 files changed

+182
-246
lines changed

‎example/common/directive/focus/focus.directive.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { Directive } from 'vue'
2+
3+
const focusDirective: Directive<HTMLElement, void> & { name: string } = {
4+
name: 'focus',
5+
mounted(el) {
6+
el.focus()
7+
},
8+
}
9+
10+
export default focusDirective

‎example/common/directive/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// 由于tsx的缘故，指令不能挂载在组件上面 https://github.com/vuejs/babel-plugin-jsx/issues/541
2+
// 所以所有指令需挂载在app上
3+
4+
import type { App, Directive } from 'vue'
5+
6+
const dirs = import.meta.globEager('./**/*.directive.ts')
7+
8+
export function setupDirective(app: App) {
9+
Reflect.ownKeys(dirs).forEach((k) => {
10+
const module = dirs[k as string]
11+
if (!module?.default) return
12+
const dir = module.default as Directive & { name: string }
13+
app.directive(dir.name, dir)
14+
})
15+
}

‎example/main.tsx‎

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,55 @@
11
import '@abraham/reflection'
2-
import { createCurrentInjector, Hook, Mut, VueComponent } from 'vue3-oop'
2+
import { Component, Mut, VueComponent } from 'vue3-oop'
33
import { createApp } from 'vue'
44
import 'ant-design-vue/dist/antd.css'
5-
import { Layout, Menu } from 'ant-design-vue'
5+
import { ConfigProvider, Layout, Menu } from 'ant-design-vue'
66
import { RouterLink, RouterView } from 'vue-router'
77
import { RouterStartService } from './router'
88
import { routes } from './router/routes'
9+
import zhCN from 'ant-design-vue/lib/locale/zh_CN'
10+
import { setup } from './setup'
911

12+
@Component({ providers: [RouterStartService] })
1013
class App extends VueComponent {
11-
injector = createCurrentInjector([RouterStartService])
1214
@Mut() collapsed = false
1315

14-
@Hook('BeforeMount')
15-
before() {
16-
console.log(222)
17-
}
18-
19-
@Hook(['Mounted', 'BeforeMount'])
20-
mounted() {
21-
console.log(111)
22-
}
2316
render() {
2417
return (
25-
<Layout style={{ minHeight: '100vh' }}>
26-
<Layout.Sider v-model:collapsed={this.collapsed} collapsible>
27-
<h2
28-
style={{ color: '#fff', textAlign: 'center', lineHeight: '40px' }}
29-
>
30-
VUE EXAMPLE
31-
</h2>
32-
<Menu theme={'dark'} mode={'inline'}>
33-
{routes.map((r) => {
34-
return (
35-
<Menu.SubMenu title={r.meta?.title} key={r.path}>
36-
{r.children?.map((i) => {
37-
return (
38-
<Menu.Item key={i.path}>
39-
<RouterLink to={i.path} style={{ display: 'block' }}>
40-
{i.meta?.title}
41-
</RouterLink>
42-
</Menu.Item>
43-
)
44-
})}
45-
</Menu.SubMenu>
46-
)
47-
})}
48-
</Menu>
49-
</Layout.Sider>
50-
<Layout.Content>
51-
<RouterView></RouterView>
52-
</Layout.Content>
53-
</Layout>
18+
<ConfigProvider locale={zhCN}>
19+
<Layout style={{ minHeight: '100vh' }}>
20+
<Layout.Sider v-model:collapsed={this.collapsed} collapsible>
21+
<h2
22+
style={{ color: '#fff', textAlign: 'center', lineHeight: '40px' }}
23+
>
24+
VUE 示例
25+
</h2>
26+
<Menu theme={'dark'} mode={'inline'}>
27+
{routes.map((r) => {
28+
return (
29+
<Menu.SubMenu title={r.meta?.title} key={r.path}>
30+
{r.children?.map((i) => {
31+
return (
32+
<Menu.Item key={i.path}>
33+
<RouterLink to={i.path} style={{ display: 'block' }}>
34+
{i.meta?.title}
35+
</RouterLink>
36+
</Menu.Item>
37+
)
38+
})}
39+
</Menu.SubMenu>
40+
)
41+
})}
42+
</Menu>
43+
</Layout.Sider>
44+
<Layout.Content>
45+
<RouterView></RouterView>
46+
</Layout.Content>
47+
</Layout>
48+
</ConfigProvider>
5449
)
5550
}
5651
}
5752

5853
const app = createApp(App)
54+
setup(app)
5955
app.mount('#app')

‎example/module/basic/basic.module.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { RouterView } from 'vue-router'
2+
import { Hook, VueComponent } from 'vue3-oop'
3+
4+
export default class BasicModule extends VueComponent {
5+
@Hook('Mounted')
6+
mounted() {
7+
console.log(this.$parent)
8+
}
9+
render() {
10+
return <RouterView></RouterView>
11+
}
12+
}

‎example/module/basic/basic.router.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { RouteRecordRaw } from 'vue-router'
2+
3+
const routes: RouteRecordRaw = {
4+
path: '/basic',
5+
component: () => import('./basic.module'),
6+
meta: {
7+
title: '基础功能',
8+
},
9+
children: [
10+
{
11+
path: '/basic/hello-world',
12+
component: () => import('./hello-world/hello-world.view'),
13+
meta: {
14+
title: '全功能类组件',
15+
},
16+
},
17+
{
18+
path: '/basic/user-input',
19+
component: () => import('./user-input/user-input.view'),
20+
meta: {
21+
title: 'user input',
22+
},
23+
},
24+
],
25+
}
26+
27+
export default routes

‎example/module/basic/hello-world/count.comp.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎example/module/basic/hello-world/hello-world.view.tsx‎

Lines changed: 15 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,23 @@
1-
import { Hook, Link, Mut, useForwardRef, VueComponent } from 'vue3-oop'
2-
import { Input, type InputProps } from 'ant-design-vue'
3-
4-
function createBigSizeInput(size: 'small' | 'middle' | 'large') {
5-
class BigInput extends VueComponent<Omit<InputProps, 'size'>> {
6-
forwardRef = useForwardRef()
7-
8-
render() {
9-
return (
10-
<Input
11-
{...this.context.attrs}
12-
ref={this.forwardRef}
13-
size={size}
14-
></Input>
15-
)
16-
}
17-
}
18-
return BigInput
19-
}
20-
21-
const BigInput = createBigSizeInput('large')
22-
23-
class Abc extends VueComponent {
24-
@Mut() a = 0
25-
26-
render() {
27-
return <div onClick={() => this.a++}>{this.a}</div>
28-
}
29-
}
1+
import { Mut, VueComponent } from 'vue3-oop'
2+
import { Button, Card, Input } from 'ant-design-vue'
303

314
export default class HelloWorldView extends VueComponent {
32-
@Link() abc: Abc[]
5+
@Mut() count = 1
336

34-
@Link() input: any
35-
36-
@Hook('Mounted')
37-
mounted() {
38-
console.log(this.abc)
39-
console.log(this.input)
40-
}
417
render() {
428
return (
43-
<div>
44-
<button onClick={() => this.abc}>+</button>
45-
<Abc ref_for ref_key={'abc'} ref={'abc'}></Abc>
46-
<Abc ref_for ref_key={'abc'} ref={'abc'}></Abc>
47-
<Abc ref_for ref_key={'abc'} ref={'abc'}></Abc>
48-
<BigInput ref={'input'}></BigInput>
49-
</div>
9+
<Card title={'加减组件'}>
10+
<Button type={'primary'} onClick={() => this.count++}>
11+
+
12+
</Button>
13+
<Input
14+
v-model:value={this.count}
15+
style={{ width: '100px', textAlign: 'center' }}
16+
></Input>
17+
<Button type={'primary'} onClick={() => this.count--}>
18+
-
19+
</Button>
20+
</Card>
5021
)
5122
}
5223
}

‎example/module/basic/hello-world/hello.vue‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎example/module/basic/user-input/user-input.view.tsx‎

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,9 @@
1-
import { Autobind, Mut, VueComponent } from 'vue3-oop'
1+
import { Mut, VueComponent } from 'vue3-oop'
22

33
export default class UserInputView extends VueComponent {
44
@Mut() message = 'Hello World!'
55

6-
@Autobind()
7-
reverseMessage() {
8-
this.message = this.message.split('').reverse().join('')
9-
}
10-
11-
@Autobind()
12-
notify(e: MouseEvent) {
13-
e.preventDefault()
14-
alert('navigation was prevented.')
15-
}
166
render() {
17-
return (
18-
<>
19-
<h1>{this.message}</h1>
20-
<button onClick={this.reverseMessage}>Reverse Message</button>
21-
<button onClick={() => (this.message += '!')}>Append "!"</button>
22-
<a href="https://vuejs.org" onClick={this.notify}>
23-
A link with e.preventDefault()
24-
</a>
25-
<style>
26-
{`
27-
button, a {
28-
display: block;
29-
margin-bottom: 1em;
30-
}
31-
`}
32-
</style>
33-
</>
34-
)
7+
return <div>111</div>
358
}
369
}

‎example/router/routes.ts‎

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,8 @@
11
import type { RouteRecordRaw } from 'vue-router'
2-
import { RouterView } from 'vue-router'
32

4-
export const routes: RouteRecordRaw[] = [
5-
{
6-
path: '/basic',
7-
redirect: '/basic/hello-world',
8-
component: RouterView,
9-
meta: {
10-
title: 'Basic',
11-
},
12-
children: [
13-
{
14-
path: '/basic/hello-world',
15-
component: () => import('../module/basic/hello-world/hello-world.view'),
16-
meta: {
17-
title: 'Hello Wolrd',
18-
},
19-
},
20-
{
21-
path: '/basic/user-input',
22-
component: () => import('../module/basic/user-input/user-input.view'),
23-
meta: {
24-
title: 'Handing User Input',
25-
},
26-
},
27-
],
28-
},
29-
]
3+
// 自动收集子模块的路由
4+
const moduleRoutes = import.meta.globEager('../module/**/*.router.ts')
5+
6+
export const routes: RouteRecordRaw[] = Reflect.ownKeys(moduleRoutes)
7+
.map((k) => moduleRoutes[k as string].default as RouteRecordRaw)
8+
.filter(Boolean)

0 commit comments

Comments
 (0)