npm package: @jl15988/uni-auto-pages
Description: Auto generate pages.json for Uniapp
Author: jl15988
Latest version: 0.2.1-alpha.3

# Uni Auto Pages

一个用于 UniApp 项目的插件，可以根据项目目录结构自动构建 pages.json 文件。



## 特性

- 🚀 自动扫描目录结构，生成 pages.json
- 📝 支持通过 defineUniPage 在页面文件中直接配置页面属性
- 📦 支持分包配置
- 🎨 支持根据路径匹配应用不同的样式
- 🧩 支持忽略路径配置，使用 glob 模式匹配，类似于 .gitignore
- 🔄 支持热更新，修改配置文件或页面文件后自动重新生成 pages.json
- 📚 支持完整的 TypeScript 类型提示



## 安装

```bash
npm install @jl15988/uni-auto-pages --save-dev
```

或者使用 yarn：

```bash
yarn add @jl15988/uni-auto-page -D
```



## 使用方法

### 1. 在 Vite 配置中引入插件

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import uniAutoPages from '@jl15988/uni-auto-pages';

export default defineConfig({
  plugins: [
    uniAutoPages(),
    uni(),
  ],
});
```

### 2. 配置

提供了三种配置方式：
- 直接在 vite.config.ts 中配置
- 在 pages.config.ts 中配置
- 在页面中使用 defineUniPage 配置页面



> 优先级：页面配置 > pages.config.ts 配置 > vite.config.ts 配置



#### 插件配置项说明

| 配置项            | 类型       | 默认值                               | 说明                               |
| ----------------- | ---------- | ------------------------------------ | ---------------------------------- |
| root              | string     | --                                   | 项目根目录，默认自动获取当前根目录 |
| entryDir          | string     | 'src'                                | 入口目录                           |
| mainDir           | string     | 'pages'                              | 主包入口（相对于入口目录）         |
| mainPage          | string     | 'pages/index/index'                  | 主页面路径                         |
| fileTypes         | string[]   | ['vue', 'nvue', 'uvue']              | 文件类型                           |
| ignore            | string[]   | ['\*\*/components/\*\*']             | 忽略路径                           |
| outputPath        | string     | 'src/pages.json'                     | 输出路径                           |
| generateTypes     | boolean    | false                                | 生成 pages 类型文件                |
| typesOutputPath   | string     | src/uni-pages.d.ts                   | pages 类型文件输出路径             |
| defaultPageConfig | PageConfig | {style: {navigationStyle: 'custom'}} | 默认页面配置                       |



#### page.config.ts 配置项说明

| 配置项                          | 类型                                                         | 默认值 | 说明                                                         |
| ------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| pages                           | PagesOptionsPage[]                                           | []     | 页面配置，可选，会自动构建，用于自定义页面配置               |
| subPackages                     | SubPackagesOptions[]                                         | []     | 分包配置，可选，可以仅配置 root，会自动扫描，也可以自定义指定页面配置 |
| 其他，如 globalStyle、tabBar 等 | uniapp pages.json，具体参照官方 pages 说明，或参考：[pages.d.ts](types/types/pages.d.ts)、[pages.ts](src/types/pages.ts) | --     | pages.json 配置，与官方 pages.json 一致                      |



#### vite.config.ts 中配置

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import uniAutoPages from '@jl15988/uni-auto-pages';
export default defineConfig({
  plugins: [
    uniAutoPages({
      entryDir: 'src/pages',
      fileTypes: ['vue', 'nvue', 'uvue'],
      ignore: [],
      outputPath: 'src/pages.json',
      defaultPageConfig: {
        style: {
            navigationStyle: 'custom'
        }
      }
    })
  ]
});
```

#### pages.config.ts 中配置

```ts
// pages.config.ts
import {defineAutoPagesConfig} from "@jl15988/uni-auto-pages";

export default defineAutoPagesConfig({
  pages: [],
  subPackages: [],
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarTitleText: '',
    navigationBarBackgroundColor: '#F8F8F8',
    backgroundColor: '#F8F8F8',
  },
  // 其他配置项...
});
```

#### 在页面中使用 defineUniPage 配置页面

```vue
<template>
  <view>页面内容</view>
</template>

<script lang="ts" setup>
import { defineUniPage } from "@jl15988/uni-auto-pages";
  
defineUniPage({
  // 页面配置，会在构建时被提取并写入 pages.json
  style: {
    navigationBarTitleText: '示例页面',
    navigationBarBackgroundColor: '#007AFF',
    navigationBarTextStyle: 'white',
    enablePullDownRefresh: true,
  }
});
</script>
```

如果你不想在页面中引入 defineUniPage，而直接使用 defineUniPage，你可以在 `tsconfig.json` 中添加以下配置：
```json
{
  "compilerOptions": {
    "types": ["@jl15988/uni-auto-pages"]
  }
}
```