使用 uni-pages

在 Vite 驱动的 uni-app 上使用基于文件的路由系统。

安装

pnpm i -D @uni-helper/vite-plugin-uni-pages

使用

配置

• vite.config.js 或者 vite.config.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.js 有么直接使用，没有的话就新建一个

import { defineUniPages } from "@uni-helper/vite-plugin-uni-pages";

export default defineUniPages({
  globalStyle: {
    navigationStyle: "default",
    navigationBarTitleText: "34343",
    navigationBarBackgroundColor: "#f8f8f8",
    navigationBarTextStyle: "black",
    backgroundColor: "#FFFFFF",
  },
  // tabBar: {
  //   custon: true,
  //   color: '#999999',
  //   selectedColor: '#018d71',
  //   backgroundColor: '#F8F8F8',
  //   borderStyle: 'black',
  //   height: '50px',
  //   fontSize: '10px',
  //   iconWidth: '24px',
  //   spacing: '3px',
  //   list: [
  //     {
  //       pagePath: 'pages/index/index',
  //       text: '首页',
  //     },
  //     {
  //       pagePath: 'pages/about/about',
  //       text: '关于',
  //     },
  //     {
  //       pagePath: 'pages/me/index',
  //       text: '听风',
  //     },
  //   ],
  // },
});

使用

• 在页面里面使用 要是首页就是 home

• 在页面里面使用 要是其他页就是 page

• 这里面可以加属性 我这里加了个 layout 后面会说

<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "layout": "default"
}
</route>

<route type="page" lang="json">
{
  "style": { "navigationBarTitleText": "侧腰" },
  "layout": "demo"
}
</route>