@jl15988/uni-auto-pages v0.1.0-alpha.3

Uni Auto Pages

一个用于 UniApp 项目的插件，可以根据项目目录结构自动构建 pages.json 文件。

特性

• 🚀 自动扫描目录结构，生成 pages.json
• 📝 支持通过 defineUniPage 在页面文件中直接配置页面属性
• 📦 支持分包配置
• 🎨 支持根据路径匹配应用不同的样式
• 🧩 支持忽略路径配置，使用 glob 模式匹配，类似于 .gitignore
• 🔄 支持热更新，修改配置文件或页面文件后自动重新生成 pages.json
• 📚 支持完整的 TypeScript 类型提示

安装

npm install @jl15988/uni-auto-pages --save-dev

或者使用 yarn：

yarn add @jl15988/uni-auto-page -D

使用方法

1. 在 Vite 配置中引入插件

// 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 配置

插件配置项说明

page.config.ts 配置项说明

vite.config.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 中配置

// pages.config.ts
import {defineAutoPagesConfig} from "@jl15988/uni-auto-pages";

export default defineAutoPagesConfig({
  pages: [],
  subPackages: [],
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarTitleText: '',
    navigationBarBackgroundColor: '#F8F8F8',
    backgroundColor: '#F8F8F8',
  },
  // 其他配置项...
});

在页面中使用 defineUniPage 配置页面

<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 中添加以下配置：

{
  "compilerOptions": {
    "types": ["@jl15988/uni-auto-pages"]
  }
}