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

Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 、和，并由社区团队维护 和。

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

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

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

 扫码进行了解 Vant4+Vue3+TypeScript 的移动前端。

系统界面截图 

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

2、VS Code 配套插件

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

•  - UnoCSS 提示插件
•  - Vue 开发必备
•  - 用于 TypeScript 服务器的 Vue 插件
•  - 脚本代码检查
•  - .env 文件 高亮
•  - 更好的错误定位
•  - 不同 IDE 维护一致的编码样式
•  - 使用 VS Code 的文件嵌套功能使文件树更干净的配置
•  - 使 VSCode 中的 TypeScript 错误更漂亮、更易于理解
•  - 在树视图中显示 TODO、FIXME 等注释标签
•  - 突出显示尾随空格并立即将其删除

npm install -g pnpm

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

nvm install 22.12.0nvm use 22.12.0nvm current

# 安装依赖cd vue3-vant4-mobilepnpm install# 安装pnpm,如果没有pnpm 请先安装npm install -g pnpm- 运行项目# 运行pnpm dev- 打包项目# 打包pnpm build

# 启动 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、项目图标使用

内置图标

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

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

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

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

外部图标 - 预设图标

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

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

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

请遵循以下约定使用图标

• <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>

点击这里获取所有（），找到想要的图标后点击复制 icon name 到 class 里即可

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

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

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