更新记录
0.0.5(2022-10-17)
下载此版本
1.修复开发模式下regenerator-runtime问题
2.一些小调整
0.0.3(2022-10-02)
下载此版本
1.处理因为 regenerator-runtime 导致构建失败的问题
2.新增部分utils方法
0.0.2(2022-10-02)
下载此版本
1.补充README
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.6.4 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
uni-vite-vue3-project-basis-template
✨ Features
- 样式处理: scss + unocss
- 状态管理: pinia-setup + pinia-plugin-persistedstate
- 网络请求: uni-ajax + 轻度 hook 封装
- 页面路由: uni-crazy-router + 轻度封装
- 工具方法: 常用方法封装
- 导入优化: 全自动可配置导入 + 解救半只手
🚀 样式处理
- scss 无需多言
- 配置 unocss 更改根目录 uno.config.js 即可,一般不需要更改直接使用,归因模式默认以 c- 为前缀
🚀 状态管理
- src/model 下的目录均被认定为一个模块,模块名即目录名
- 目录下必须存在 index.js 文件且导出一个 setup 函数和 option 配置对象
- setup 用于定义导出 pinia 模块的变量、方法
- option 用于配置额外参数,如持久化插件的配置
- 新增模块只需要将 src/model/global 复制一份改一下目录名即可,会自动注册
- 如何使用
// 不需要导入
const globalModel = model.global() // 等同于常见使用的 useGlobalModel 方法,global等于目录名
🚀 网络请求
- 主要使用了 uni-ajax进行了简单的 hook 封装
- 实例封装在 src/common/request.js 文件,hook 封装在 src/hooks/useRequest.js 文件
- hook 仅实现了基本的请求、缓存、重试、响应依赖
- 如何使用
// 不需要导入
const {data,error,loading,count,status,cookies,run,clear,stop...} = useRequest(urlPath[,{可配参数见useRequest.js文件}])
🚀 页面路由
- 主要使用了 uni-crazy-router
- 路由守卫存在于 src/router 下面对应的文件,方便统一管理
- 路由守卫对应名称卸载的方法全部挂载于 uni.$router 下面,调用即卸载
🚀 工具方法
- src/utils 下面的文件导出的函数全部都会被自动按需导入到页面,无需手动操作
- 前缀可以在 vite.config.js 下面的 autoImport 插件配置改
- 如何使用
// 无需导入
前缀_导出的函数名称()
// 例如
util_isPromise(() => {}) // false
🚀 导入优化
- 详见 vite.config.js 文件中的插件 AutoImport 配置
- 需要注意的是:需要自动导入的目录下的文件导出需要使用:
统一具名导出
// 定义任意个函数
const testFn = () => {}
const testFn2 = () => {}
// 统一具名导出
export { testFn, testFn2 }
- 因为不支持一些用于区分的配置,所以在 .config/util.js 提供了一些实现相同功能的函数
// 例如上面工具方法的使用需要加上前缀 util_ 即是因为使用了 getDirFileApi 函数进行自动申明api
// 如何配置-在插件AutoImport的imports中的对象中使用
{
// 需要用扩展运算符将其拉平
...getDirFileApi(`src下面的目录路径`,{...前缀后缀扩展名等配置})
// 例如 src/util/test 目录下的所有文件的导出支持自动导入
...getDirFileApi(`util/test`,{prefix:"u_t_"}) // 第二个参数可不配置
// 那么使用时: u_t_函数名()
}
### ⚠️ ?????
- 有任何问题、建议,[移步至此](https://github.com/itmanyong/uni-vite-vue3-project-basis-template/issues)
## 使用 pnpm 的开发者挥着提示请使用以下命令安装依赖
```js
// pnpm原生命令
pnpm install --shamefully-hoist
// 快捷命令
pnpm ia