更新记录

0.0.2（2024-03-12）

更新了全局loading和下拉刷新

0.0.1（2023-07-27）

更新了 husky 代码提交钩子 和 一些eslint ， stykelint，commitlint

平台兼容性

uni-app Vue3 Vite4 pinia2 TypeScript 基础框架

简介

• uni-app Vue3 Vite4 pinia2 TypeScript Tailwindcss 基础框架
• cli 创建的 Vue3/Vite 项目 与 使用 HBuilderX 导入插件 的包有差异,最好使用vscode开发,请直接访问 开源地址

说明

• 框架完全基于 Vue3 <script setup> 写法,不支持 Vue2;
• 可用于学习与交流;
• 目前测试 H5、微信小程序,APP(Android)通过;
• 其他平台暂未测试,后续会增加;
• 如发现问题或建议可在评论区留言, 看到会及时处理;
• 如有需求亦可在评论区留言,或在此项目基础上增加;
• 代码规范 husky、prettier、eslint、lint-staged、stylelint 的作用和使用

特性

• 最新技术栈：使用 Vue3/Vite4/pinia ,TypeScript 等前端前沿技术开发;
• vue3组件库: wot-design-uni 组件库，wot-design-uni组件库基于vue3+Typescript构建，参照wot desing的设计规范进行开发，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。
• Tailwind CSS: Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
• Eslint/Prettier/stylelint: 规范代码样式格式,统一编码;
• husky: 提交代码钩子
• 路由拦截: uni-mini-router 类似Vue Router的API和功能,在uni-app中进行路由跳转、传参、拦截等常用操作;
• 请求拦截: luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。

目录结构

├─ src
│ ├─api # 接口文件目录
│ ├─static # 静态公共文件
│ │ ├─ images # 图片
│ │ │ ├─.png
│ │ │ └─...
│ │ │
│ │ └─ ...
│ │
│ ├─components # 组件目录
│ ├─enum # 枚举
│ ├─pages # 页面
│ │ ├─ index
│ │ │ └─index.vue
│ │ └─...
│ │
│ ├─style # 样式
│ │
│ ├─state # 状态管理模式(pinia)
│ │ ├─ modules # 数据模块
│ │ │ ├─auth.ts
│ │ │ └─...
│ │ │
│ │ └─ index.ts
│ │
│ └─utils # 工具类
│ ├─ cache # 缓存相关目录
│ └─ request.ts #api请求拦截
│ └─ layout #公共的方法
├─ .env
├─ .env.development
├─ .env.production
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc.js
├─ .commitlint.config.js
├─ .stylelint.config
├─ index.html
├─ package.json
├─ README.md
├─ tailwind.config.js
├─ tsconfig.json
└─ vite.config.ts

安装使用

• 安装依赖

npm install

• 运行

# 其他端请查看 package.json script
npm dev:h5

• 打包

# 其他端请查看 package.json script
npm build:h5

• npm run cz提交命令 先git add. 后在使用这个命令

npm run cz

提交类型