基于Vant4+Vue3+TypeScript的H5移动前端
<p>本H5移动前端项目使用最新的 `Vue3.5`、`Vite6`、`Vant4`、`Pinia`、`TypeScript`、`UnoCSS`、`Vue-i18n` 等主流技术开发，结合我们《SqlSguar开发框架》后端的功能接口，实现了相关的框架基础功能和一些业务案例的功能。另外集成了 `Axios`、`ECharts`、`IconSvg`、`mockjs<em>`、`</em>qrcode<em>`、`</em>dayjs` 等等一些优秀的第三方组件。本项目采用VSCode开发，支持TypeScript，支持国际化，支持主题切换，支持权限验证，支持多种后端API对接。后端API可以对接基于《SqlSugar开发框架》的后端API，也可以对接基于Python+FastApi的后端API。</p><div>
<div><strong>基础功能</strong>：功能内容包括了用户管理、注册用户管理、组织机构管理、角色管理、地址管理、字典管理、附件管理、报表图表、参数配置、资讯管理等管理功能。</div>
<div>其中包括多个登录界面、支持账号密码登录、手机+验证码登录、修改密码（配合验证码）、修改手机号码（配合验证码）、用户信息修改、头像修改、主题设置、其中未登录用户可以申请注册用户，管理员后台审核、审核通过后创建用户，申请的用户即可登录系统。</div>
<div><strong>业务功能</strong>：提供一个店面信息的管理案例，对店面创建、店面查询、店面信息展示处理，并可以对店面店面异常信息进行采集和上报，根据角色对店面的异常记录进行多角色的上报和审批、认定处理的流程，送货员可以对店面的签收记录进行登记和跟踪查询，异常上报等操作。</div>
<div><strong>组件例子封装</strong>：根据业务需要，我们封装了便于使用的自定义组件，包括字典选择、附件上传、多图片展示、日期选择、日期范围选择、省市区选择、部门机构选择、记录筛选选择、条码/二维码显示组件、多语言处理案例、内容区展示组件、页面头部组件、手写签名处理等众多组件，以便更好的重用相关界面元素，提高开发效率。</div>
<div> </div>
<div><strong>关于Vant4</strong></div>
<div>
<p>Vant 是一个<strong>轻量、可定制的移动端组件库</strong>，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。</p>
<p>当前移动端 项目采用最新的Vant4进行开发，适合于Vue3的项目开发。</p>
<p>Vant 4 是一款基于 Vue 3 的轻量、可靠的手机端组件库，主要用于快速搭建移动端应用。它提供了许多常用的 UI 组件，如按钮、卡片、表单、导航等，旨在帮助开发者提高开发效率，同时保持应用的性能和一致性。</p>
<p>Vant 4 是完全基于 Vue 3 构建的，充分利用了 Vue 3 的新特性和性能优化，如 Composition API、Teleport、Fragments 等。通过 Vue 3 的优化，Vant 4 在渲染性能上有了显著提升，特别是在处理大型列表和复杂组件时。</p>
<p> <img src="https://www.iqidi.com/Framework/images/vant-mobile.png" alt="移动端H5应用" width="296" height="296"></p>
<p> 扫码进行了解 Vant4+Vue3+TypeScript 的移动前端。</p>
<p> </p>
<p><strong>系统界面截图 </strong></p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815130214747-1745375059.png" alt="image" width="365" height="789" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815130459509-709744887.png" alt="image" width="365" height="790" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815132550722-2143928347.png" alt="image" width="366" height="790" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815130830454-1956042431.png" alt="image" width="363" height="784" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815131705281-1190812576.png" alt="image" width="364" height="787" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815131950744-1895948113.png" alt="image" width="364" height="786" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815132112120-1181763222.png" alt="image" width="363" height="785" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815131546383-1382788588.png" alt="image" width="364" height="786" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815131418439-855023247.png" alt="image" width="364" height="786" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815130927555-300477920.png" alt="image" width="363" height="784" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815131158267-1072407939.png" alt="image" width="363" height="784" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815133235559-524926225.png" alt="image" width="363" height="784" loading="lazy"></p>
<p> </p>
</div>
<h3>1、基础知识</h3>
<div>
<ul dir="auto">
<li>Vite - 熟悉 <code>Vite</code> 特性</li>
<li>Vue3 - 熟悉 <code>Vue3</code> 基础语法</li>
<li>Vant4 - 移动端 Vue 组件库，掌握 <code>vant4</code> 组件基本使用</li>
<li>Pinia - 使用 Pinia 的状态管理，熟悉 <code>Pinia</code> 特性</li>
<li>TypeScript - 熟悉 <code>TypeScript</code> 基本语法</li>
<li>Vue-Router-Next - 熟悉 <code>Vue-Router</code>基本使用</li>
<li>ECharts5 - 熟悉 <code>Echarts</code> 基本使用</li>
<li>Iconify - 本项目推荐图标库，当然你也可以使用 <code>IconSvg</code></li>
<li>Postcss-Mobile-Forever - 了解手机端 <code>px</code> 转 <code>viewport</code> 插件的作用，将固定尺寸的移动端视图转为具有最大宽度的可伸缩的移动端视图</li>
<li>Lodash-es - <code>JS</code>高性能工具库</li>
<li>UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎，熟悉 <code>UnoCSS</code> 基本使用</li>
<li>Mock.js - 本地数据模拟支持，了解 <code>Mockjs</code> 基本语法</li>
<li>ES6+ - 熟悉 <code>ES6</code> 基本语法</li>
<li>支持 i18n - 国际化处理，掌握多语言配置处理和用法</li>
<li>Axios 封装 - 网络接口请求处理，包括常规API处理和文件上传</li>
<li>unplugin-auto-import - API 自动加载 - 直接使用 Composition API 无需引入</li>
<li>vConsole - 移动端网页开发工具，方便调试错误</li>
<li>暗黑模式 - 可以切换前端界面的显示模式。</li>
</ul>
</div>
<div>
<h3 class="heading-element" dir="auto">2、VS Code 配套插件</h3>
<p dir="auto">如果你使用的 IDE 是 VS Code（推荐）的话，可以安装以下工具来提高开发效率及代码格式化</p>
<ul dir="auto">
<li>UnoCSS - UnoCSS 提示插件</li>
<li>Volar - Vue 开发必备</li>
<li>TypeScript Vue Plugin (Volar) - 用于 TypeScript 服务器的 Vue 插件</li>
<li>ESLint - 脚本代码检查</li>
<li>DotENV - <code>.env</code> 文件 高亮</li>
<li>Error Lens - 更好的错误定位</li>
<li>EditorConfig for VS Code - 不同 IDE 维护一致的编码样式</li>
<li>File Nesting Updater - 使用 VS Code 的文件嵌套功能使文件树更干净的配置</li>
<li>Pretty TypeScript Errors - 使 VSCode 中的 TypeScript 错误更漂亮、更易于理解</li>
<li>Todo Tree - 在树视图中显示 TODO、FIXME 等注释标签</li>
<li>Trailing Spaces - 突出显示尾随空格并立即将其删除</li>
</ul>
</div>
<div>
<div class="markdown-heading" dir="auto">
<h3 class="heading-element" dir="auto">3、环境准备</h3>
<p class="heading-element" dir="auto"><strong>环境准备 </strong></p>
<p class="heading-element" dir="auto">本移动端项目，使用 Vite 作为前端构建工具，使用 pnpm 作为包管理器，两者能够显著提升前端开发体验。 在最新的 <code>Vite</code> 版本当中，要求 Node.js 版本要求`20.x`以上，这里推荐 `^20.9.0 || >=21.7.1`</p>
<p class="heading-element" dir="auto">（推荐优先安装长期维护 <code>LTS</code> 版）, <code>pnpm</code> 版本应不小于 <code>v9</code>。</p>
<p class="code-line" dir="auto" data-line="63">如果您还没有安装 pnpm，请执行下面的命令进行安装。</p>
<div class="cnblogs_code">
<pre>npm <span style="color: rgba(0, 0, 255, 1)">install</span> -g pnpm</pre>
</div>
<p class="code-line" dir="auto" data-line="70">安装完成以后，我们建议您更换为国内的镜像源。</p>
<div class="cnblogs_code">
<pre>npm config set registry https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">registry.npmmirror.com</span></pre>
</div>
<div>
<div> </div>
<div>由于项目可能存在多个不同的Node版本，请安装nvm管理Node版本，安装地址：https://github.com/coreybutler/nvm-windows/releases</div>
<div>安装NVM后，可通过nvm current查看当前Node版本。</div>
<div>如果当前版本不满足要求，请使用nvm切换到合适的Node版本, nvm use 22.12.0。</div>
<div>如果没有对应的node 版本，请使用nvm安装。</div>
<div>
<div class="cnblogs_code">
<pre>nvm <span style="color: rgba(0, 0, 255, 1)">install</span> <span style="color: rgba(128, 0, 128, 1)">22.12</span>.<span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">
nvm use </span><span style="color: rgba(128, 0, 128, 1)">22.12</span>.<span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">
nvm current</span></pre>
</div>
<p> </p>
<p><strong>安装项目依赖及运行</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"># 安装依赖
cd vue3</span>-vant4-<span style="color: rgba(0, 0, 0, 1)">mobile
pnpm </span><span style="color: rgba(0, 0, 255, 1)">install</span><span style="color: rgba(0, 0, 0, 1)">
# 安装pnpm,如果没有pnpm 请先安装
npm </span><span style="color: rgba(0, 0, 255, 1)">install</span> -<span style="color: rgba(0, 0, 0, 1)">g pnpm
</span>-<span style="color: rgba(0, 0, 0, 1)"> 运行项目
# 运行
pnpm dev
</span>-<span style="color: rgba(0, 0, 0, 1)"> 打包项目
# 打包
pnpm build</span></pre>
</div>
<div>
<div>编译后项目存放在`dist`文件夹中，可直接部署到服务器上运行。</div>
<div>服务器采用nginx部署，可参考`nginx.conf`文件进行修改处理。</div>
<div>开发环境下，服务器的重定向如果需要转发端口，请在`vite.config.ts`中配置`proxy`。</div>
<div>部署环境下，这些开发环境的设置失效，需要通过修改`nginx.conf`文件进行配置，转发处理。</div>
<div> </div>
<div>
<div><strong>Nginx 服务的相关命令</strong></div>
</div>
</div>
</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"># 启动 Nginx 服务，第一次启动Nginx服务
start nginx
# 刷新 Nginx 服务,每次修改配置文件后都需要刷新一下
nginx </span>-<span style="color: rgba(0, 0, 0, 1)">s reload
# 查看所有的nginx进程
tasklist </span>/<span style="color: rgba(0, 0, 255, 1)">fi</span> <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">imagename eq nginx.exe</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
# 停止所有nginx进程
taskkill </span>/<span style="color: rgba(0, 0, 255, 1)">fi</span> <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">imagename eq nginx.exe</span><span style="color: rgba(128, 0, 0, 1)">"</span> /f</pre>
</div>
</div>
</div>
<p class="heading-element" dir="auto"> </p>
<p class="heading-element" dir="auto"><strong>浏览器支持</strong></p>
</div>
<p dir="auto">本地开发推荐使用<code>Chrome 80+</code> 浏览器，支持现代浏览器, 不支持 IE。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815112332294-1555460875.png" alt="image" width="452" height="85" loading="lazy"></p>
<p> </p>
<h3 id="built-in-icons">4、项目图标使用</h3>
<p dir="auto"><strong>内置图标</strong></p>
<p dir="auto">内置图标是模板预先提供好的，开发者可以直接使用。模板默认以 Vant 作为移动端组件库，它提供了基于字体的图标集 Icon 组件，提供了线框图标和实底图标的两种风格图标。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815120723289-1388474369.png" alt="image" width="246" height="351" loading="lazy"></p>
<p>我们可以像下面代码一样使用图标，非常的简单。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">van-icon </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="chat-o"</span> <span style="color: rgba(0, 0, 255, 1)">/></span></pre>
</div>
<p>大部分时候，内置的图标无法满足我们的需求场景，这就需要引入外部图标集。</p>
<p> </p>
<p><strong>外部图标 - 预设图标</strong></p>
<p>项目也使用 <strong><code>unocss</code> </strong>的 <code>icon</code> 预设 作为系统 Icon。</p>
<p>我们推荐 iconify。它是统一的图标框架，超过 <code>150</code> 多个图标集，和 <code>200,000</code> 个开源矢量图标，并且会定期更新图标。您可以在 iconify 或者 icones 中看到所有的图标集。</p>
<p>使用 <code>iconify</code> 有多种方式，我们模板使用 CSS icon 方案，此方案由 <code>@unocss/preset-icons</code> 提供支持，可以很好的和 Unocss 配合使用。</p>
<p dir="auto">请遵循以下约定使用图标</p>
<ul dir="auto">
<li><code><prefix><collection>-<icon></code></li>
<li><code><prefix><collection>:<icon></code></li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)"> A basic anchor icon from Phosphor icons </span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="i-ph-anchor-simple-thin"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)"> An orange alarm from Material Design Icons </span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="i:mdi:alarm"</span> <span style="color: rgba(0, 0, 255, 1)">/></span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">i </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="i-ic:sharp-arrow-back-ios"</span><span style="color: rgba(255, 0, 0, 1)"> text-xl </span><span style="color: rgba(0, 0, 255, 1)">/></span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">van-cell </span><span style="color: rgba(255, 0, 0, 1)">:border</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(255, 0, 0, 1)"> title</span><span style="color: rgba(0, 0, 255, 1)">="个人信息"</span><span style="color: rgba(255, 0, 0, 1)"> is-link to</span><span style="color: rgba(0, 0, 255, 1)">="/editUserInfo"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">template </span><span style="color: rgba(255, 0, 0, 1)">#icon</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">i </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="i-mingcute:idcard-fill mr-2 text-xl"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">van-cell</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p dir="auto">点击这里获取所有可用的图标（https://icones.js.org/），找到想要的图标后点击复制 icon name 到 class 里即可</p>
<div class="markdown-alert markdown-alert-warning" dir="auto">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">记得加 i</span>-xxx 前缀，从 icones 复制的 icon name 是没有 i-<span style="color: rgba(0, 0, 0, 1)"> 前缀的
更多详细使用请看 https:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">unocss.dev/presets/icons#icons-preset</span></pre>
</div>
<p> </p>
<h3>5、页面组件</h3>
<p>一般来说，页面的组件是放在 <code>src/components</code> 文件夹下的 <code>.vue</code> 文件，被统称为项目应用的公共组件。如下所示</p>
</div>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815123216383-1073887015.png" alt="image" width="366" height="434" loading="lazy"></p>
<p>创建这些组件后，会自动添加到全局的文件components.d.ts <em id="__mceDel">中。</em></p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815124120927-1370675765.png" alt="image" width="595" height="205" loading="lazy"></p>
<p>如果要创建页面级组件，也就是只属于某个页面的专用组件，通常会放在 <code>src/views/**/components</code> 目录下。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250815123512741-1317950248.png" alt="image" width="345" height="332" loading="lazy"></p>
<p dir="auto"> </p>
</div>
</div>
<p>注：该H5前端项目，借鉴了https://github.com/xiangshu233/vue3-vant4-mobile 项目，整合我们开发框架的相关功能，实现了 基于Vant4+Vue3+TypeScript的H5移动前端。</p>
</div>
<div id="MySignature" role="contentinfo">
<div style="border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: #cccccc; border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: #cccccc; border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; background-color: #eeeeee;">
<img src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top" alt>
<span style="color: #000000"><span class="Apple-tab-span" style="white-space: pre"></span>
专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
<br> 转载请注明出处：撰写人：伍华聪 http://www.iqidi.com <br> </span></div><br><br>
来源：https://www.cnblogs.com/wuhuacong/p/19039255
頁:
[1]