Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uni-helper/vite-plugin-uni-pages
为 Vite 下的 uni-app 提供基于文件系统的路由
https://github.com/uni-helper/vite-plugin-uni-pages
uniapp
Last synced: about 1 month ago
JSON representation
为 Vite 下的 uni-app 提供基于文件系统的路由
- Host: GitHub
- URL: https://github.com/uni-helper/vite-plugin-uni-pages
- Owner: uni-helper
- License: mit
- Created: 2022-11-14T07:52:00.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-17T06:28:07.000Z (about 2 months ago)
- Last Synced: 2024-09-22T09:19:21.881Z (about 2 months ago)
- Topics: uniapp
- Language: TypeScript
- Homepage: https://uni-helper.js.org/vite-plugin-uni-pages
- Size: 939 KB
- Stars: 104
- Watchers: 3
- Forks: 15
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-uni-app - vite - helper/vite-plugin-uni-pages) - 在 uni-app 上使用基于文件的路由系统。 (打包器插件)
README
# @uni-helper/vite-plugin-uni-pages
在 Vite 驱动的 uni-app 上使用基于文件的路由系统。
## Packages
- [vite-plugin-uni-pages](./packages/core/)
核心，提供基于文件的路由系统
- [volar-service-uni-pages](./packages/volar/)
为 `` 块 提供 IntelliSense
- [pages-json-schema](./packages/schema/)
为 uni-app 的 `pages.json` 提供 schema
## 安装
```bash
pnpm i -D @uni-helper/vite-plugin-uni-pages
```
## 使用
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniPages from '@uni-helper/vite-plugin-uni-pages'
// It is recommended to put it in front of Uni
export default defineConfig({
plugins: [UniPages(), Uni()],
})
```
在 `pages.config.(ts|mts|cts|js|cjs|mjs|json)` 定义全局属性，你可以在文件中使用 `#ifdef H5` 类似语法。
```ts
// pages.config.ts
import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
export default defineUniPages({
// 你也可以定义 pages 字段，它具有最高的优先级。
pages: [],
globalStyle: {
navigationBarTextStyle: 'black',
navigationBarTitleText: '@uni-helper',
},
})
```
现在所有的 page 都会被自动发现！
### SFC 自定义块用于路由数据
通过添加一个 `` 块到 SFC 中来添加路由元数据。这将会在路由生成后直接添加到路由中，并且会覆盖。
你可以使用 `` 来指定一个解析器，或者使用 `routeBlockLang` 选项来设置一个默认的解析器。
- **解析器支持：** JSON, JSON5, YAML
- **默认：** JSON5
```html
{
"style": { "navigationBarTitleText": "@uni-helper" }
}
style:
navigationBarTitleText: "@uni-helper"
```
导入虚拟模块即可访问所有页面的元数据
```ts
///
import { pages } from 'virtual:uni-pages'
console.log(pages)
```
## 配置
```ts
export interface Options {
/**
* 为页面路径生成 TypeScript 声明
*
* 接受布尔值或与相对项目根目录的路径
*
* 默认为 uni-pages.d.ts
*
* @default true
*/
dts?: boolean | string
/**
* 配置文件
* @default 'pages.config.(ts|mts|cts|js|cjs|mjs|json)',
*/
configSource: ConfigSource
/**
* 设置默认路由入口
* @default 'pages/index' || 'pages/index/index'
*/
homePage: string
/**
* 是否扫描并合并 pages.json 中 pages 字段
* @default true
*/
mergePages: boolean
/**
* 扫描的目录
* @default 'src/pages'
*/
dir: string
/**
* subPackages 扫描的目录，例如：src/pages-sub
*/
subPackages: string[]
/**
* 输出 pages.json 目录
* @default "src"
*/
outDir: string
/**
* 排除的页面，相对于 dir 和 subPackages
* @default []
* @example ['**/components/**/*.*']
*/
exclude: string[]
/**
* 自定义块语言
* @default 'json5'
*/
routeBlockLang: 'json5' | 'json' | 'yaml' | 'yml'
onBeforeLoadUserConfig: (ctx: PageContext) => void
onAfterLoadUserConfig: (ctx: PageContext) => void
onBeforeScanPages: (ctx: PageContext) => void
onAfterScanPages: (ctx: PageContext) => void
onBeforeMergePageMetaData: (ctx: PageContext) => void
onAfterMergePageMetaData: (ctx: PageContext) => void
onBeforeWriteFile: (ctx: PageContext) => void
onAfterWriteFile: (ctx: PageContext) => void
}
```
## 感谢
- [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages.git)