mirror of
https://gitee.com/h_mo/uniapp-vue3-vite-ts-template
synced 2025-04-05 06:12:44 +08:00
简介
- uni-app Vue3 Vite TypeScript 基础框架
- cli创建的Vue3/Vite项目 与 使用HBuilderX导入插件 的包有差异,请直接访问 开源地址
说明
- 框架完全基于Vue3 SFC
<script setup>写法,不支持Vue2; - 可用于学习与交流;
- 目前测试H5、微信小程序,APP(Android),支付宝小程序通过;
- 其他平台暂未测试,后续会增加;
- 如发现问题或建议可在评论区留言, 或提Issues及PR,会及时处理;
- 如有需求亦可在评论区留言,或在此项目基础上增加;
特性
- 最新技术栈：使用 Vue3/Vite4/pinia ,TypeScript 等前端前沿技术开发;
- Unocss: 原子化CSS, iconify图标
- Eslint/Prettier: 规范代码格式,统一编码;
- 路由拦截: 基于uni.addInterceptor进行路由拦截;
- 请求拦截: 核心使用 luch-request,支持请求和响应拦截等;
- 缓存加密: 使用AES加密缓存,可设置区分在开发或生成环境中是否加密;
目录结构
.
├─ src
│ ├─assets # 静态资源目录
│ │
│ ├─components # 组件目录
│ │ ├─ BasicButton
│ │ │ ├─index.vue
│ │ │ └─prpos.ts
│ │ └─...
│ │
│ ├─enums # 枚举/常量
│ │ ├─ cacheEnum.ts
│ │ └─...
│ │
│ ├─pages # 页面
│ │ ├─ index
│ │ │ └─index.vue
│ │ └─...
│ │
│ ├─services # 接口相关
│ │ ├─ api # api
│ │ │ ├─auth.ts
│ │ │ └─...
│ │ │
│ │ └─ model # 数据模型
│ │ ├─authModel.d.ts
│ │ └─...
│ │
│ ├─settings # 设置
│ │ └─ encryptionSetting # 加密设置
│ │
│ ├─state # 状态管理模式(pinia)
│ │ ├─ modules # 数据模块
│ │ │ ├─auth.ts
│ │ │ └─...
│ │ │
│ │ └─ index.ts
│ │
│ ├─static # 静态公共文件
│ │ ├─ images # 图片
│ │ │ ├─avatar.png
│ │ │ └─...
│ │ │
│ │ └─ ...
│ │
│ ├─types # 类型文件
│ │ ├─ http.d.ts
│ │ └─ ...
│ │
│ └─utils # 工具类
│ ├─ cache # 缓存相关目录
│ ├─ http # request相关目录
│ ├─ interceptors # 拦截器相关目录
│ └─ ...
│
├─ .env
├─ .env.development
├─ .env.production
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc.js
├─ favicon.ico
├─ index.html
├─ package.json
├─ pnpm-lock.yaml
├─ README.md
├─ tree.txt
├─ tsconfig.json
└─ vite.config.ts
预览
-
H5
-
小程序(体验版-需申请体验)
安装使用
- 安装依赖
pnpm install
- 运行
# 其他端请查看 package.json script
pnpm dev:h5
- 打包
# 其他端请查看 package.json script
pnpm build:h5