feat(vite): 重新引入 @uni-helper/vite-plugin-uni-layouts

package.json

@@ -95,6 +95,7 @@
     "@uni-helper/uni-app-types": "^0.5.12",
     "@uni-helper/uni-ui-types": "^0.5.11",
     "@uni-helper/unocss-preset-uni": "^0.2.5",
+    "@uni-helper/vite-plugin-uni-pages": "^0.2.13",
     "@vue/runtime-core": "^3.2.45",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.16",

pages.config.ts

@@ -0,0 +1,73 @@
+import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
+
+export default defineUniPages({
+  globalStyle: {
+    navigationStyle: 'white',
+    navigationBarTitleText: 'vue3-uniapp',
+  },
+  easycom: {
+    autoscan: true,
+    custom: {
+      '^Fly(.*)': '@/components/fly-$1/fly-$1.vue',
+      '^fly-(.*)': '@/components/fly-$1/fly-$1.vue',
+      '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
+    },
+  },
+  tabBar: {
+    color: '#7A7E83',
+    selectedColor: '#00f',
+    backgroundColor: '#ffffff',
+    borderStyle: 'black',
+    height: '50px',
+    fontSize: '10px',
+    iconWidth: '24px',
+    spacing: '3px',
+    list: [
+      {
+        pagePath: 'pages/index/index',
+        iconPath: 'static/tab-icons/extui.png',
+        selectedIconPath: 'static/tab-icons/extuiHL.png',
+        text: '首页',
+      },
+      {
+        pagePath: 'pages/throughout/index',
+        iconPath: 'static/tab-icons/template.png',
+        selectedIconPath: 'static/tab-icons/templateHL.png',
+        text: '通屏',
+      },
+    ],
+  },
+  /**
+   * 设置默认路由入口
+   * @default 'pages/index' || 'pages/index/index'
+   */
+  // homePage: 'pages/index/index',
+  /**
+   * 是否扫描并合并 pages.json 中 pages 字段
+   * @default true
+   */
+  // mergePages: true,
+
+  /**
+   * 扫描的目录
+   * @default 'src/pages'
+   */
+  // dir: 'src/pages',
+  /**
+   * 自定义块语言
+   * @default 'json5' 可选值：'json5' | 'json' | 'yaml' | 'yml',
+   */
+  // routeBlockLang: 'json5', // 注意json5允许注释，单行多行都可以，还有其他很多特性，推荐使用
+  /**
+   * 排除的页面，相对于 dir 和 subPackages，通常把这些目录里面的components里面的文件排除掉
+   * @default []
+   */
+  exclude: ['**/components/**/*.*'],
+  // 你也可以定义 pages 字段，它具有最高的优先级。
+  pages: [],
+  /**
+   * subPackages 扫描的目录，例如：src/pages-sub
+   * @type SubPackage[] | undefined
+   */
+  subPackages: undefined,
+})

pnpm-lock.yaml

@@ -106,6 +106,9 @@ devDependencies:
   '@uni-helper/unocss-preset-uni':
     specifier: ^0.2.5
     version: 0.2.5(eslint-import-resolver-typescript@3.6.1)(postcss@8.4.32)(typescript@4.9.5)(vite@4.1.4)
+  '@uni-helper/vite-plugin-uni-pages':
+    specifier: ^0.2.13
+    version: 0.2.13(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
   '@vue/runtime-core':
     specifier: ^3.2.45
     version: 3.3.13
@@ -3652,6 +3655,16 @@ packages:
       '@types/node': 20.10.5
     dev: true
 
+  /@types/lodash-es@4.17.12:
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+    dependencies:
+      '@types/lodash': 4.14.202
+    dev: true
+
+  /@types/lodash@4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
+    dev: true
+
   /@types/mdast@3.0.15:
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
     dependencies:
@@ -3869,6 +3882,10 @@ packages:
       vue3: /vue@3.3.13(typescript@4.9.5)
     dev: true
 
+  /@uni-helper/uni-env@0.0.3:
+    resolution: {integrity: sha512-K6MEnmN7Dg+NnEkfUUhjaKc/rPVY7tcGdsVUKOlC1/z2E6H6zjSSTdJg8z+sVJtZ03Ff1G/MHz2PYDyAS6gjQQ==}
+    dev: true
+
   /@uni-helper/uni-env@0.1.1(eslint-import-resolver-typescript@3.6.1)(typescript@4.9.5):
     resolution: {integrity: sha512-NGQMOyqCF8VAEi3wWbJLKRwqhMldmFvITMs0j/bvVJ2jjUwN+0ofpPF3aHakCGpuY577DRx4coVN2iYmCb75fw==}
     dependencies:
@@ -3920,6 +3937,26 @@ packages:
       - vitest
     dev: true
 
+  /@uni-helper/vite-plugin-uni-pages@0.2.13(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
+    resolution: {integrity: sha512-QA2bIFQYVYUphcl1aUxN4zUxyiHQPS0hQP0V0c03aUxacuNAEYuM4QUgrYRCT3LReSLkZSUyfAhfr64SPPdccQ==}
+    dependencies:
+      '@uni-helper/uni-env': 0.0.3
+      '@vue/compiler-sfc': 3.3.13
+      chokidar: 3.5.3
+      debug: 4.3.4
+      fast-glob: 3.3.2
+      json5: 2.2.3
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      magic-string: 0.30.5
+      unconfig: 0.3.11
+      yaml: 2.3.4
+    transitivePeerDependencies:
+      - '@types/lodash-es'
+      - lodash
+      - lodash-es
+      - supports-color
+    dev: true
+
   /@unocss-applet/preset-applet@0.7.8:
     resolution: {integrity: sha512-KWzYD88eRf7hMa0SZv8X19eT1X1fwkInM47cjNZ36i/2brt77DSnZF3y61F1zxzdf28SRH/wzgkm2e0I7JepCQ==}
     dependencies:
@@ -9903,6 +9940,22 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: true
+
+  /lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+    dev: true
+
   /lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 

src/pages.json

@@ -1,31 +1,6 @@
 {
-  "pages": [
-    {
-      "path": "pages/index/index",
-      "style": {
-        "navigationBarTitleText": "我才是标题"
-      }
-    },
-    {
-      "path": "pages/throughout/index",
-      "style": {
-        "navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
-        "enablePullDownRefresh": true,
-        "backgroundColor": "#23c09c", // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/my/index",
-      "style": {
-        "navigationBarTitleText": "我的"
-      }
-    }
-  ],
   "globalStyle": {
-    "navigationBarTextStyle": "white",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8",
+    "navigationStyle": "white",
     "navigationBarTitleText": "vue3-uniapp"
   },
   "easycom": {
@@ -38,7 +13,7 @@
   },
   "tabBar": {
     "color": "#7A7E83",
-    "selectedColor": "blue",
+    "selectedColor": "#00f",
     "backgroundColor": "#ffffff",
     "borderStyle": "black",
     "height": "50px",
@@ -60,5 +35,36 @@
       }
     ]
   },
+  "exclude": ["**/components/**/*.*"],
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "type": "home",
+      "style": {
+        "navigationBarTitleText": "我才是标题"
+      }
+    },
+    {
+      "path": "pages/my/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "我的"
+      }
+    },
+    {
+      "path": "pages/throughout/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
+        "enablePullDownRefresh": true,
+        "backgroundColor": "#23c09c",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/index/components/demo",
+      "type": "page"
+    }
+  ],
   "subPackages": []
 }

src/pages/index/components/demo.vue

@@ -0,0 +1,3 @@
+<template>
+  <view> demo </view>
+</template>

src/pages/index/index.vue

@@ -1,3 +1,10 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5" type="home">
+{
+  style: { navigationBarTitleText: '我才是标题' },
+}
+</route>
+
 <template>
   <view class="content">
     <image class="logo" src="/static/logo.png" />

src/pages/my/index.vue

@@ -1,3 +1,8 @@
+<route lang="json5">
+{
+  style: { navigationBarTitleText: '我的' },
+}
+</route>
 <template>
   <view>我的</view>
 </template>

src/pages/throughout/index.vue

@@ -1,3 +1,14 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '通屏+下拉刷新+自定义导航栏',
+    enablePullDownRefresh: true,
+    backgroundColor: '#23c09c', // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
+    navigationStyle: 'custom',
+  },
+}
+</route>
+
 <template>
   <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
     <!-- 1/3，多于1个页面，用返回图标 -->

uni-pages.d.ts

@@ -4,11 +4,16 @@
 // Generated by vite-plugin-uni-pages
 
 interface NavigateToOptions {
-  url: "pages/index/index";
+  url: "pages/index/index" |
+       "pages/my/index" |
+       "pages/throughout/index" |
+       "pages/index/components/demo";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 
-interface SwitchTabOptions {}
+interface SwitchTabOptions {
+  url: 'pages/index/index' | 'pages/throughout/index'
+}
 
 type ReLaunchOptions = NavigateToOptions | SwitchTabOptions
 

vite.config.ts

@@ -1,6 +1,8 @@
 import path from 'node:path'
 import { defineConfig, loadEnv } from 'vite'
 import Uni from '@dcloudio/vite-plugin-uni'
+// @see https://uni-helper.js.org/vite-plugin-uni-pages
+import UniPages from '@uni-helper/vite-plugin-uni-pages'
 import dayjs from 'dayjs'
 import svgLoader from 'vite-svg-loader'
 import { visualizer } from 'rollup-plugin-visualizer'
@@ -40,6 +42,8 @@ export default ({ command, mode }) => {
   console.log(env)
   return defineConfig({
     plugins: [
+      // UniPages() 需要在 Uni() 之前引入
+      UniPages(),
       Uni(),
       UnoCSS(),
       htmlPlugin(env.VITE_APP_TITLE),