登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 资源区 › 代码 ›基于Vant4+Vue3+TypeScript的H5移动前端

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

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

4.png
  
5.png
  
6.png

7.png
  
8.png
  
9.png

10.png
  
11.png
  
12.png

 
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（推荐）的话，可以安装以下工具来提高开发效率及代码格式化

  • UnoCSS - UnoCSS 提示插件
  • Volar - Vue 开发必备
  • TypeScript Vue Plugin (Volar) - 用于 TypeScript 服务器的 Vue 插件
  • ESLint - 脚本代码检查
  • DotENV - .env 文件 高亮
  • Error Lens - 更好的错误定位
  • EditorConfig for VS Code - 不同 IDE 维护一致的编码样式
  • File Nesting Updater - 使用 VS Code 的文件嵌套功能使文件树更干净的配置
  • Pretty TypeScript Errors - 使 VSCode 中的 TypeScript 错误更漂亮、更易于理解
  • Todo Tree - 在树视图中显示 TODO、FIXME 等注释标签
  • Trailing Spaces - 突出显示尾随空格并立即将其删除
3、环境准备

环境准备 
本移动端项目，使用 Vite 作为前端构建工具，使用 pnpm 作为包管理器，两者能够显著提升前端开发体验。 在最新的 Vite 版本当中，要求 Node.js 版本要求`20.x`以上，这里推荐 `^20.9.0 || >=21.7.1`
（推荐优先安装长期维护 LTS 版）, pnpm 版本应不小于 v9。
如果您还没有安装 pnpm，请执行下面的命令进行安装。
  1. npm install -g pnpm
复制代码
安装完成以后，我们建议您更换为国内的镜像源。
  1. 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安装。
  1. nvm install 22.12.0
  2. nvm use 22.12.0
  3. nvm current
复制代码
 
安装项目依赖及运行
  1. # 安装依赖
  2. cd vue3-vant4-mobile
  3. pnpm install
  5. # 安装pnpm,如果没有pnpm 请先安装
  6. npm install -g pnpm
  8. - 运行项目
  9. # 运行
  10. pnpm dev
  12. - 打包项目
  14. # 打包
  15. pnpm build
复制代码
编译后项目存放在`dist`文件夹中，可直接部署到服务器上运行。服务器采用nginx部署，可参考`nginx.conf`文件进行修改处理。开发环境下，服务器的重定向如果需要转发端口，请在`vite.config.ts`中配置`proxy`。部署环境下，这些开发环境的设置失效，需要通过修改`nginx.conf`文件进行配置，转发处理。 Nginx 服务的相关命令
  1. # 启动 Nginx 服务，第一次启动Nginx服务
  2. start nginx
  4. # 刷新 Nginx 服务,每次修改配置文件后都需要刷新一下
  5. nginx -s reload
  7. # 查看所有的nginx进程
  8. tasklist /fi "imagename eq nginx.exe"
  10. # 停止所有nginx进程
  11. taskkill /fi "imagename eq nginx.exe" /f
复制代码
 
浏览器支持
本地开发推荐使用Chrome 80+ 浏览器，支持现代浏览器, 不支持 IE。
13.png

 
4、项目图标使用

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

我们可以像下面代码一样使用图标，非常的简单。
  1. [/code]大部分时候，内置的图标无法满足我们的需求场景，这就需要引入外部图标集。
  2.  
  3. [b]外部图标 - 预设图标[/b]
  4. 项目也使用 [b]unocss [/b]的 icon 预设 作为系统 Icon。
  5. 我们推荐 iconify。它是统一的图标框架，超过 150 多个图标集，和 200,000 个开源矢量图标，并且会定期更新图标。您可以在 iconify 或者 icones 中看到所有的图标集。
  6. 使用 iconify 有多种方式，我们模板使用 CSS icon 方案，此方案由 @unocss/preset-icons 提供支持，可以很好的和 Unocss 配合使用。
  7. 请遵循以下约定使用图标
  8. [list]
  9. [*]-
  10. [*]:
  11. [/list][code]
复制代码
  1. <i class="i-ic:sharp-arrow-back-ios" text-xl />
复制代码
  1. <van-cell :border="false" title="个人信息" is-link to="/editUserInfo">
  2.   <template #icon>
  3.     <i class="i-mingcute:idcard-fill mr-2 text-xl" />
  4.   </template>
  5. </van-cell>
复制代码
点击这里获取所有可用的图标（https://icones.js.org/），找到想要的图标后点击复制 icon name 到 class 里即可
  1. 记得加 i-xxx 前缀，从 icones 复制的 icon name 是没有 i- 前缀的
  2. 更多详细使用请看 https://unocss.dev/presets/icons#icons-preset
复制代码
 
5、页面组件

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

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

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

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
能杜孱
2025-8-15 16:43:01

0

粉丝关注

17

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫