uniapp-vue3-js-vite-pinia-eslint 快速开发模板

uniapp-vue3-js-vite-pinia-eslint 快速开发模板地址:链接

项目简介

基于 uni-app 的 Vue3 + JavaScript 快速开发模板,集成 uni-ui、Vite、luch-request、Pinia 及 ESLint,旨在为跨平台应用开发提供高效、规范的基础环境,支持快速构建微信小程序、H5、App 等多端应用。

项目特点

  • 技术栈前沿:采用 Vue3 响应式系统,结合 Vite 高效构建工具,提升开发体验。
  • 状态管理:集成 Pinia,提供更简洁、可扩展的状态管理方案。
  • UI 组件库:内置 uni-ui 组件库,包含丰富的跨端通用组件,减少重复开发。
  • 代码规范:配置 ESLint 代码检查,统一团队编码规范,提升代码质量。
  • 跨平台支持:基于 uni-app,一次开发可发布到微信小程序、H5、APP 等多个平台。
  • 内置样式:提供flex布局等快捷类名,无需额外引入样式文件,快速实现页面布局。

目录结构

复制代码
├── .eslintignore       # ESLint 忽略文件配置
├── .eslintrc.js        # ESLint 规则配置
├── .gitignore          # Git 忽略文件配置
├── LICENSE             # 项目许可证
├── README.md           # 项目说明文档
├── auto-imports.d.ts   # Vue 自动导入声明
├── index.html          # 入口 HTML 文件
├── package.json        # 项目依赖及脚本配置
├── shims-uni.d.ts      # uni-app 类型声明
├── src/                # 主源码目录
│   ├── App.vue         # 应用根组件
│   ├── api/            # API 接口封装
│   ├── config.js       # 项目配置文件
│   ├── main.js         # 应用入口文件
│   ├── manifest.json   # 应用配置(如小程序 AppID)
│   ├── mixin/          # 全局混入
│   ├── pages/          # 页面文件
│   ├── pages.json      # 页面路由及全局配置
│   ├── static/         # 静态资源(图片、CSS)
│   ├── store/          # Pinia 状态管理
│   ├── uni.scss        # 全局 SCSS 样式
│   ├── uni_modules/    # uni-app 模块(如 uni-ui)
│   └── utils/          # 工具函数库(按功能/端类型细分)
│       ├── common/     # 各端通用工具
│       ├── weixin/     # 微信小程序特有
│       ├── h5/         # H5 特有
│       ├── app/        # App 特有
│       └── request.js  # 全局请求封装(基于 luch-request)
└── vite.config.js      # Vite 构建配置

技术栈

  • 框架:Vue3、uni-app
  • 状态管理:Pinia
  • 构建工具:Vite
  • 请求库:luch-request
  • UI 组件库:uni-ui
  • 代码规范:ESLint

使用教程

环境准备

  • 安装 Node.js(v18+)
  • 安装 pnpm 包管理器:npm install -g pnpm

依赖安装

bash 复制代码
pnpm install

运行开发

  • 微信小程序pnpm run dev:mp-weixin
  • H5pnpm run dev:h5
  • 其他平台 :参考 uni-app 文档调整命令(如 dev:app 运行 App)

构建发布

  • 微信小程序pnpm run build:mp-weixin
  • H5pnpm run build:h5

功能模块说明

  • API 封装src/api/ 目录提供通用接口请求封装,支持统一处理请求头、错误提示等。
  • 状态管理src/store/ 目录使用 Pinia 管理全局状态(如用户信息、应用配置)。
  • 工具函数src/utils/ 包含常用工具(如请求封装、数据校验、日期格式化)。
  • 权限管理(App Android)src/utils/app.js 封装了Android平台权限监听与申请功能,解决上架华为应用市场审核要求
  • 数据快捷验证工具src/utils/common/validate.js 提供多种验证函数(如uni.$tao.validate.mobile('13800138000')校验手机号),覆盖常见业务场景的数据格式校验需求。
  • 全局样式src/uni.scss 定义全局 SCSS 变量及混合,保持样式一致性。
  • 页面路由pages.json 配置页面路径及导航栏样式,支持动态路由。

其他

相关推荐
FinelyYang7 小时前
UniApp + LiveKit:Android 端为什么要用原生做屏幕共享,以及我们怎么落地的
android·uni-app
研☆香7 小时前
聊一聊前端的常见字 关键字
开发语言·前端·javascript
日光倾9 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
Buke..12 小时前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
前端炒粉14 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
谙忆102414 小时前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
宠友信息14 小时前
IM系统开发技术路线分析,即时通讯源码助力快速搭建聊天应用
java·spring boot·redis·websocket·mysql·uni-app·vue
花归去14 小时前
ant的a-table更改表格的高度
前端·javascript·html
sibylyue15 小时前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js
AC赳赳老秦17 小时前
多源数据关联挖掘:OpenClaw 打通工商、招投标、专利公开数据,挖掘企业业务关联关系
java·c语言·javascript·c++·python·deepseek·openclaw