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

其他

相关推荐
让梦想疯狂4 分钟前
开源、免费、美观的 Vue 后台管理系统模板
前端·javascript·vue.js
葡萄糖o_o38 分钟前
ResizeObserver的错误
前端·javascript·html
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | AnimatedNavigation(动态导航)
前端·javascript·vue.js·tailwindcss
米粒宝的爸爸1 小时前
uniapp中vue3 ,uview-plus使用!
前端·vue.js·uni-app
JustHappy2 小时前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(下)
前端·javascript·react.js
江城开朗的豌豆2 小时前
Vue中Token存储那点事儿:从localStorage到内存的避坑指南
前端·javascript·vue.js
江城开朗的豌豆2 小时前
MVVM框架:让前端开发像搭积木一样简单!
前端·javascript·vue.js
氢灵子2 小时前
Canvas 变换和离屏 Canvas 变换
前端·javascript·canvas
dy17172 小时前
tabs页签嵌套表格,切换表格保存数据不变并回勾
javascript·vue.js·elementui
GISer_Jing2 小时前
Axios面试常见问题详解
前端·javascript·面试