unibest+uniapp+vue3+TS+Wot UI分包

前言

最近领导选了个小程序框架,作为一名码龄超过5年的老玩家,框框一顿干,然后没啥事情了,就研究项目优化的事情,网上的这方面unibest分包有点少,而且不是很详细,我的文笔不好,大家凑活看

首先先看官方文档

1. 怎么分包？​

vite.config.ts 里面有一个配置，如下：(其中 subPackages 就是用来分包的)

ts

UniPages({exclude: ['**/components/**/**.*'],subPackages: ['src/pages-sub'], // 是个数组，可以配置多个
}),

其他类型的分包可以看下我之前的文档

2. 详细解读

第一步就是官方的那个,第二步的话,找到根目录下面的pages.config.ts

这里是所有的路由的地方,有个subPackages数组,然后我直接贴代码了

subPackages: [
      {
          "root":"pagesA",
          pages:[
              {
                path: 'pagesA/fillIn/mileage',
                style: {
                  navigationBarTitleText: '里程填报',
                }
              },
              {
                path: 'pagesA/fillIn/maintenance',
                style: {
                  navigationBarTitleText: '维修/保养填报',
                }
              },
              {
                path: 'pagesA/fillIn/card',
                style: {
                  navigationBarTitleText: '加油卡使用填报',
                }
              },
              {
                path: 'pagesA/fillIn/violation',
                style: {
                  navigationBarTitleText: '违章填报',
                }
              }
          ]
      }
  ]

这是比较详细的写法,当然,如果对页面名称没啥要求的,可以使用下面的方法去修改标题

uni.setNavigationBarTitle({

title: '新的标题'

});

第二步的代码主要是限制页面名称的,实际上,如果对这个没要求,直接在pages同级去建个文件夹,pagesA(需要和第一步的名称保持一致,名字可以自定义,我习惯用这个),然后在pagesA下面建立文件夹,建立vue文件,重新编译即可。

结尾

以上是我分包的全部内容了,喜欢请一键三连！