File tree 1 file changed +43
-0
lines changed
1 file changed +43
-0
lines changed Original file line number Diff line number Diff line change @@ -34,3 +34,46 @@ src/pages/
34
34
::: tip
35
35
通常,您只需创建业务页面即可,如果您希望深入了解并进行高级配置,请访问 [ 官网] ( https://uvr.esm.is/ ) 。
36
36
:::
37
+
38
+ ## 常见问题 {#FAQ}
39
+
40
+ ### 如何创建页面组件? {#page-component}
41
+
42
+ 一般来说,放在 ` src/components ` 文件夹下的 ` .vue ` 文件被统称为应用的公共组件。如果要创建页面级组件,也就是只属于某个页面的专用组件,通常会放在 ` src/pages/**/components ` 目录下。然而,正如之前提到的,` src/pages ` 下的所有文件都会被扫描并生成路由,这会导致页面内的组件也生成路由,这并非我们期望的效果。
43
+
44
+ 为了避免这种情况,我们需要设置插件忽略特定的扫描规则。我们可以像这样设置:
45
+
46
+ ``` ts
47
+ // build/vite/index.ts
48
+ export function createVitePlugins() {
49
+ return [
50
+ VueRouter ({
51
+ extensions: [' .vue' ],
52
+ routesFolder: ' src/pages' ,
53
+ exclude: [' src/pages/**/components/**' ], // [!code ++]
54
+ dts: ' src/typed-router.d.ts' ,
55
+ }),
56
+ ]
57
+ }
58
+
59
+ ```
60
+
61
+ 同时,为了让页面专用组件也可以自动导入,我们还需要像这样设置:
62
+
63
+ ``` ts
64
+ // build/vite/index.ts
65
+ export function createVitePlugins() {
66
+ return [
67
+ Components ({
68
+ extensions: [' vue' ],
69
+ resolvers: [VantResolver ()],
70
+ include: [/ \. vue$ / , / \. vue\? vue/ ],
71
+ dts: ' src/components.d.ts' ,
72
+ dirs: [' src/components' ], // [!code --]
73
+ dirs: [' src/components' , ' src/pages/**/components' ], // [!code ++]
74
+ })
75
+ ]
76
+ }
77
+ ```
78
+
79
+ 这样,我们就可以在页面内使用专用组件,而无需导入,也不会生成多余路由了。
You can’t perform that action at this time.
0 commit comments