基于Vant4+Vue3+TypeScript的H5移动前端

2025年8月21日
| 没有评论

本H5移动前端项目使用最新的 `Vue3.5`、`Vite6`、`Vant4`、`Pinia`、`TypeScript`、`UnoCSS`、`Vue-i18n` 等主流技术开发，结合我们《SqlSguar开发框架》后端的功能接口，实现了相关的框架基础功能和一些业务案例的功能。另外集成了 `Axios`、`ECharts`、`IconSvg`、`mockjs`、`qrcode`、`dayjs` 等等一些优秀的第三方组件。本项目采用VSCode开发，支持TypeScript，支持国际化，支持主题切换，支持权限验证，支持多种后端API对接。后端API可以对接基于《SqlSugar开发框架》的后端API，也可以对接基于Python+FastApi的后端API。

基础功能：功能内容包括了用户管理、注册用户管理、组织机构管理、角色管理、地址管理、字典管理、附件管理、报表图表、参数配置、资讯管理等管理功能。 其中包括多个登录界面、支持账号密码登录、手机+验证码登录、修改密码（配合验证码）、修改手机号码（配合验证码）、用户信息修改、头像修改、主题设置、其中未登录用户可以申请注册用户，管理员后台审核、审核通过后创建用户，申请的用户即可登录系统。
业务功能：提供一个店面信息的管理案例，对店面创建、店面查询、店面信息展示处理，并可以对店面店面异常信息进行采集和上报，根据角色对店面的异常记录进行多角色的上报和审批、认定处理的流程，送货员可以对店面的签收记录进行登记和跟踪查询，异常上报等操作。
组件例子封装：根据业务需要，我们封装了便于使用的自定义组件，包括字典选择、附件上传、多图片展示、日期选择、日期范围选择、省市区选择、部门机构选择、记录筛选选择、条码/二维码显示组件、多语言处理案例、内容区展示组件、页面头部组件、手写签名处理等众多组件，以便更好的重用相关界面元素，提高开发效率。  
关于Vant4

Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

当前移动端 项目采用最新的Vant4进行开发，适合于Vue3的项目开发。

Vant 4 是一款基于 Vue 3 的轻量、可靠的手机端组件库，主要用于快速搭建移动端应用。它提供了许多常用的 UI 组件，如按钮、卡片、表单、导航等，旨在帮助开发者提高开发效率，同时保持应用的性能和一致性。

Vant 4 是完全基于 Vue 3 构建的，充分利用了 Vue 3 的新特性和性能优化，如 Composition API、Teleport、Fragments 等。通过 Vue 3 的优化，Vant 4 在渲染性能上有了显著提升，特别是在处理大型列表和复杂组件时。

 

系统界面截图 

    

    

    

    

 

1、基础知识

  • Vite – 熟悉 Vite 特性
  • Vue3 – 熟悉 Vue3 基础语法
  • Vant4 – 移动端 Vue 组件库，掌握 vant4 组件基本使用
  • Pinia – 使用 Pinia 的状态管理，熟悉 Pinia 特性
  • TypeScript – 熟悉 TypeScript 基本语法
  • Vue-Router-Next – 熟悉 Vue-Router基本使用
  • ECharts5 – 熟悉 Echarts 基本使用
  • Iconify – 本项目推荐图标库，当然你也可以使用 IconSvg
  • Postcss-Mobile-Forever – 了解手机端 px 转 viewport 插件的作用，将固定尺寸的移动端视图转为具有最大宽度的可伸缩的移动端视图
  • Lodash-es – JS高性能工具库
  • UnoCSS – 高性能且极具灵活性的即时原子化 CSS 引擎，熟悉 UnoCSS 基本使用
  • Mock.js – 本地数据模拟支持，了解 Mockjs 基本语法
  • ES6+ – 熟悉 ES6 基本语法
  • 支持 i18n – 国际化处理，掌握多语言配置处理和用法
  • Axios 封装 – 网络接口请求处理，包括常规API处理和文件上传
  • unplugin-auto-import – API 自动加载 – 直接使用 Composition API 无需引入
  • vConsole – 移动端网页开发工具，方便调试错误
  • 暗黑模式 – 可以切换前端界面的显示模式。

2、VS Code 配套插件

如果你使用的 IDE 是 VS Code（推荐）的话，可以安装以下工具来提高开发效率及代码格式化

3、环境准备

环境准备 

本移动端项目，使用 Vite 作为前端构建工具，使用 pnpm 作为包管理器，两者能够显著提升前端开发体验。 在最新的 Vite 版本当中，要求 Node.js 版本要求`20.x`以上，这里推荐 `^20.9.0 || >=21.7.1`

（推荐优先安装长期维护 LTS 版）, pnpm 版本应不小于 v9。

如果您还没有安装 pnpm，请执行下面的命令进行安装。

npm install -g pnpm

安装完成以后，我们建议您更换为国内的镜像源。

npm config set registry https://registry.npmmirror.com

  由于项目可能存在多个不同的Node版本，请安装nvm管理Node版本，安装地址：
https://github.com/coreybutler/nvm-windows/releases 安装NVM后，可通过nvm current查看当前Node版本。 如果当前版本不满足要求，请使用nvm切换到合适的Node版本, nvm use 22.12.0。 如果没有对应的node 版本，请使用nvm安装。 

nvm install 22.12.0
nvm use 22.12.0
nvm current

 

安装项目依赖及运行

# 安装依赖
cd vue3-vant4-mobile
pnpm install

# 安装pnpm,如果没有pnpm 请先安装
npm install -g pnpm

- 运行项目
# 运行
pnpm dev

- 打包项目

# 打包
pnpm build

编译后项目存放在`dist`文件夹中，可直接部署到服务器上运行。 服务器采用nginx部署，可参考`nginx.conf`文件进行修改处理。 开发环境下，服务器的重定向如果需要转发端口，请在`vite.config.ts`中配置`proxy`。 部署环境下，这些开发环境的设置失效，需要通过修改`nginx.conf`文件进行配置，转发处理。  
Nginx 服务的相关命令 

# 启动 Nginx 服务，第一次启动Nginx服务
start nginx

# 刷新 Nginx 服务,每次修改配置文件后都需要刷新一下
nginx -s reload

# 查看所有的nginx进程
tasklist /fi "imagename eq nginx.exe"

# 停止所有nginx进程
taskkill /fi "imagename eq nginx.exe" /f

 

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器，支持现代浏览器, 不支持 IE。

 

4、项目图标使用

内置图标

内置图标是模板预先提供好的，开发者可以直接使用。模板默认以 Vant 作为移动端组件库，它提供了基于字体的图标集 Icon 组件，提供了线框图标和实底图标的两种风格图标。

我们可以像下面代码一样使用图标，非常的简单。

<van-icon name="chat-o" />

大部分时候，内置的图标无法满足我们的需求场景，这就需要引入外部图标集。

 

外部图标 – 预设图标

项目也使用 unocss 的 icon 预设 作为系统 Icon。

我们推荐 iconify。它是统一的图标框架，超过 150 多个图标集，和 200,000 个开源矢量图标，并且会定期更新图标。您可以在 iconify 或者 icones 中看到所有的图标集。

使用 iconify 有多种方式，我们模板使用 CSS icon 方案，此方案由 @unocss/preset-icons 提供支持，可以很好的和 Unocss 配合使用。

请遵循以下约定使用图标

  • <prefix><collection>-<icon>
  • <prefix><collection>:<icon>
<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i:mdi:alarm" />
<i class="i-ic:sharp-arrow-back-ios" text-xl />
<van-cell :border="false" title="个人信息" is-link to="/editUserInfo">
  <template #icon>
    <i class="i-mingcute:idcard-fill mr-2 text-xl" />
  </template>
</van-cell>

点击这里获取所有可用的图标（https://icones.js.org/），找到想要的图标后点击复制 icon name 到 class 里即可

记得加 i-xxx 前缀，从 icones 复制的 icon name 是没有 i- 前缀的
更多详细使用请看 https://unocss.dev/presets/icons#icons-preset

 

5、页面组件

一般来说，页面的组件是放在 src/components 文件夹下的 .vue 文件，被统称为项目应用的公共组件。如下所示

创建这些组件后，会自动添加到全局的文件components.d.ts 中。

如果要创建页面级组件，也就是只属于某个页面的专用组件，通常会放在 src/views/**/components 目录下。

 

注：该H5前端项目，借鉴了https://github.com/xiangshu233/vue3-vant4-mobile 项目，整合我们开发框架的相关功能，实现了 基于Vant4+Vue3+TypeScript的H5移动前端。

brower, nodejs, vue, 前端