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

其他

相关推荐
烬头88214 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
Amumu121384 小时前
Vuex介绍
前端·javascript·vue.js
2601_949809595 小时前
flutter_for_openharmony家庭相册app实战+相册详情实现
javascript·flutter·ajax
qq_177767375 小时前
React Native鸿蒙跨平台通过Animated.Value.interpolate实现滚动距离到动画属性的映射
javascript·react native·react.js·harmonyos
2601_949833395 小时前
flutter_for_openharmony口腔护理app实战+饮食记录实现
android·javascript·flutter
2601_949480065 小时前
【无标题】
开发语言·前端·javascript
css趣多多5 小时前
Vue过滤器
前端·javascript·vue.js
●VON6 小时前
React Native for OpenHarmony:项目目录结构与跨平台构建流程详解
javascript·学习·react native·react.js·架构·跨平台·von
爱吃大芒果6 小时前
Flutter for OpenHarmony 实战:mango_shop 路由系统的配置与页面跳转逻辑
开发语言·javascript·flutter
qq_177767376 小时前
React Native鸿蒙跨平台实现消息列表用于存储所有消息数据,筛选状态用于控制消息筛选结果
javascript·react native·react.js·ecmascript·harmonyos