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
  • H5 :pnpm run dev:h5
  • 其他平台 :参考 uni-app 文档调整命令(如 dev:app 运行 App)

构建发布

  • 微信小程序 :pnpm run build:mp-weixin
  • H5 :pnpm 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 配置页面路径及导航栏样式,支持动态路由。

其他

相关推荐
paopaokaka_luck9 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
鶴哥只手遮天13 小时前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
米米商聊15 小时前
图标能点,按钮就可用了吗?键盘、名称与收藏状态
前端·javascript
技术小甜甜17 小时前
【Cursor】Skill 被标黄色警告,怎么改成合格的 SKILL.md
开发语言·javascript·ai编程·cursor·1024程序员节·ai agent·skills
hudie76518 小时前
LikeShop 二开最常改的 5 个文件(附改前改后对比)
前端·uni-app·php·个人开发
qetfw18 小时前
Bash 函数与流程控制:read、if、for、case 验证
linux·前端·javascript·bash
鬼手点金19 小时前
从 API 消息到模型 Token:Chat Template
java·前端·javascript·数据库·人工智能·深度学习·1024程序员节
Mr.Pascal21 小时前
Javascript之什么是作用域?
javascript·1024程序员节
microrain21 小时前
设备报文怎么变,SagooIoT 只约定三个函数名
javascript·物联网·golang·sagooiot
Bug收容所21 小时前
Vue+JS Day3
前端·javascript·vue.js·前端框架·1024程序员节