1- <img src =" ./banner.svg " alt =" banner " width =" 100% " />
1+ <a href = " https://uni-helper.js.org/vite-plugin-uni-pages " >< img src =" ./banner.svg " alt =" banner " width =" 100% " /></ a >
22
33<br >
44<a href =" https://github.com/uni-helper/vite-plugin-uni-pages/stargazers " ><img src =" https://img.shields.io/github/stars/uni-helper/vite-plugin-uni-pages?colorA=005947&colorB=eee&style=for-the-badge " ></a >
88
99在 Vite 驱动的 uni-app 上使用基于文件的路由系统。
1010
11-
1211## 安装
1312
1413``` bash
@@ -17,156 +16,24 @@ pnpm i -D @uni-helper/vite-plugin-uni-pages
1716
1817## 使用
1918
19+ 📖 ** 请阅读[ 完整文档] ( https://uni-helper.js.org/vite-plugin-uni-pages ) 了解完整使用方法!**
20+
2021``` ts
2122// vite.config.ts
22- import { defineConfig } from ' vite'
2323import Uni from ' @dcloudio/vite-plugin-uni'
2424import UniPages from ' @uni-helper/vite-plugin-uni-pages'
25+ import { defineConfig } from ' vite'
2526
26- // It is recommended to put it in front of Uni
2727export default defineConfig ({
28- plugins: [UniPages (), Uni ()],
28+ plugins: [
29+ UniPages (), // 需要在 Uni() 之前调用
30+ Uni (),
31+ ],
2932})
3033```
3134
32- 在 ` pages.config.(ts|mts|cts|js|cjs|mjs|json) ` 定义全局属性,你可以在文件中使用 ` #ifdef H5 ` 类似语法。
33-
34- ``` ts
35- // pages.config.ts
36- import { defineUniPages } from ' @uni-helper/vite-plugin-uni-pages'
37-
38- export default defineUniPages ({
39- // 你也可以定义 pages 字段,它具有最高的优先级。
40- pages: [],
41- globalStyle: {
42- navigationBarTextStyle: ' black' ,
43- navigationBarTitleText: ' @uni-helper' ,
44- },
45- })
46- ```
47-
48- 现在所有的 page 都会被自动发现!
49-
50- ### SFC 自定义块用于路由数据
51-
52- 通过添加一个 ` <route> ` 块到 SFC 中来添加路由元数据。这将会在路由生成后直接添加到路由中,并且会覆盖。
53-
54- 你可以使用 ` <route lang="yaml"> ` 来指定一个解析器,或者使用 ` routeBlockLang ` 选项来设置一个默认的解析器。
55-
56- - ** 解析器支持:** JSON5, JSONC, JSON, YAML, YML
57- - ** 默认:** JSON5
58-
59- ``` html
60- <!-- index.vue -->
61- <!-- 使用 type="home" 属性设置首页 -->
62- <route type =" home" lang =" json" >
63- {
64- "style": { "navigationBarTitleText": "@uni-helper" }
65- }
66- </route >
67-
68- <!-- other.vue -->
69- <route lang =" yaml" >
70- style:
71- navigationBarTitleText: "@uni-helper"
72- </route >
73- ```
74-
75- 导入虚拟模块即可访问所有页面的元数据
76-
77- ``` ts
78- /// <reference types = " @uni-helper/vite-plugin-uni-pages/client" />
79- import { pages } from ' virtual:uni-pages'
80-
81- console .log (pages )
82- ```
83-
84- ## 配置
85-
86- ``` ts
87- export interface Options {
88- /**
89- * 为页面路径生成 TypeScript 声明
90- *
91- * 接受布尔值或与相对项目根目录的路径
92- *
93- * 默认为 uni-pages.d.ts
94- *
95- * @default true
96- */
97- dts? : boolean | string
98-
99- /**
100- * 配置文件
101- * @default ' pages.config.(ts|mts|cts|js|cjs|mjs|json)' ,
102- */
103- configSource: ConfigSource
104-
105- /**
106- * 设置默认路由入口
107- * @default ' pages/index' || 'pages/index/index'
108- */
109- homePage: string
110-
111- /**
112- * 是否扫描并合并 pages.json 中 pages 字段
113- * @default true
114- */
115- mergePages: boolean
116-
117- /**
118- * 扫描的目录
119- * @default ' src/pages'
120- */
121- dir: string
122-
123- /**
124- * subPackages 扫描的目录,例如:src/pages-sub
125- */
126- subPackages: string []
127-
128- /**
129- * 输出 pages.json 目录
130- * @default " src"
131- */
132- outDir: string
133-
134- /**
135- * 排除的页面,相对于 dir 和 subPackages
136- * @default []
137- * @example ['**/components/**/*.*']
138- */
139- exclude: string []
140-
141- /**
142- * 自定义块语言
143- * @default ' json5'
144- */
145- routeBlockLang: ' json5' | ' jsonc' | ' json' | ' yaml' | ' yml'
146-
147- onBeforeLoadUserConfig: (ctx : PageContext ) => void
148- onAfterLoadUserConfig: (ctx : PageContext ) => void
149- onBeforeScanPages: (ctx : PageContext ) => void
150- onAfterScanPages: (ctx : PageContext ) => void
151- onBeforeMergePageMetaData: (ctx : PageContext ) => void
152- onAfterMergePageMetaData: (ctx : PageContext ) => void
153- onBeforeWriteFile: (ctx : PageContext ) => void
154- onAfterWriteFile: (ctx : PageContext ) => void
155- }
156- ```
157-
158- ## Packages
159-
160- - [ vite-plugin-uni-pages] ( ./packages/core/ )
161-
162- 核心,提供基于文件的路由系统
163- - [ volar-service-uni-pages] ( ./packages/volar/ )
164-
165- 为 ` <route> ` 块 提供 IntelliSense
166- - [ pages-json-schema] ( ./packages/schema/ )
167-
168- 为 uni-app 的 ` pages.json ` 提供 schema
169-
17035## 感谢
17136
17237- [ vite-plugin-pages] ( https://github.com/hannoeru/vite-plugin-pages.git )
38+
39+
0 commit comments