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 配置页面路径及导航栏样式,支持动态路由。

其他

相关推荐
福兮说2 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理3 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
凤城老人4 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)4 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan4 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_5 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
yivifu6 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
weixin_448290257 小时前
书庐开发实战教学
javascript·css·html
默_笙7 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript
一木 之林7 小时前
DeepSeek Agent 开发(一)
开发语言·前端·javascript