Vant2零基础入门：第一个组件这样写

原创 于 2025-12-13 11:10:30 发布 · 272 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    编写一个面向新手的Vant2教学示例，从零开始创建一个简单的按钮组件。分步骤展示：1)Vue环境搭建；2)Vant2安装配置；3)基础按钮引入；4)添加不同类型(primary/warning/danger)；5)添加不同尺寸(large/normal/small)；6)添加禁用状态；7)添加加载状态。每个步骤需有详细注释和效果预览，避免使用复杂概念。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

示例图片

最近在学Vue的组件库Vant2，发现它特别适合移动端开发。作为新手，我从最基础的按钮组件开始摸索，记录下这个学习过程，希望能帮到同样刚入门的同学。

  1. 准备Vue环境 首先需要一个干净的Vue项目。推荐使用Vue CLI创建（Vue 2.x版本），运行命令行工具初始化项目后，进入项目目录。这一步就像搭积木前先准备好底板，后续操作都在这个基础上进行。

  2. 安装Vant2 在项目根目录下通过npm或yarn添加vant依赖。安装完成后需要在main.js中全局引入Vant的样式文件和组件，这里注意要同时安装vant的配套插件vant/lib/button。安装过程就像给工具箱添加新工具，后续就能随时调用。

  3. 基础按钮实现 在App.vue中，使用vant提供的van-button标签即可创建默认按钮。首次使用时建议先写最简版本，只保留type="default"的基础样式，确认组件能正常渲染。这一步能快速获得正反馈，看到浏览器里出现第一个Vant按钮时会很有成就感。

  4. 类型扩展 Vant2按钮有primary（蓝）、warning（黄）、danger（红）等多种类型。在同一个页面并列添加这三种按钮，观察不同色彩带来的视觉差异。类型切换就像给按钮换皮肤，通过修改type属性就能实现，这是组件库最实用的特性之一。

  5. 尺寸调整 通过size属性设置large/normal/small三种规格。建议实际对比这三种尺寸在移动端页面的显示效果，normal适合大多数场景，large适合重要操作，small则用于紧凑布局。这里能体会到组件库标准化尺寸的好处。

  6. 禁用状态 添加disabled属性即可禁用按钮，变成灰色不可点击状态。这个功能在表单提交时特别有用，可以防止重复提交。测试时可以写个@click事件，观察禁用状态下是否还会触发。

  7. 加载状态 通过loading属性实现按钮加载动画，通常配合异步操作使用。可以模拟网络请求：点击后开启loading，2秒后自动关闭。这个动效能让用户明确感知到操作已被响应，是提升体验的小细节。

整个过程就像在组装乐高，Vant2提供标准化的零件，我们只需要按需组合。示例图片

最近发现InsCode(快马)平台特别适合练手这类前端demo，不用配置本地环境，浏览器里就能直接编写和预览Vue组件。他们的在线编辑器响应很快，写完代码右侧立即显示效果，还能一键部署成可访问的网页。我试着把这次练习的按钮项目放上去，从编码到上线只用了10分钟，对新手特别友好。

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    编写一个面向新手的Vant2教学示例，从零开始创建一个简单的按钮组件。分步骤展示：1)Vue环境搭建；2)Vant2安装配置；3)基础按钮引入；4)添加不同类型(primary/warning/danger)；5)添加不同尺寸(large/normal/small)；6)添加禁用状态；7)添加加载状态。每个步骤需有详细注释和效果预览，避免使用复杂概念。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

小程序设计入门：从零开始打造你的第一个微信小程序
小程序开发
06-05 1687
为什么要学微信小程序？答案很简单：它是目前用户量最大、生态最完善的「轻应用」平台。截至2023年，微信月活用户超13亿，小程序数量超600万，覆盖电商、教育、工具、社交等100+个场景。本文的目标是让完全零基础的读者（哪怕没学过编程），也能通过3小时动手实践，做出一个能在手机上运行的实用小程序。用「装修房子」类比理解小程序核心概念；手把手安装开发者工具、注册账号；以「TODO清单」为例，分步骤编写页面、样式、逻辑；最后教你如何调试、预览、发布到微信。页面。
零基础vant3的使用
向宇
08-26 890
零基础vant3的使用 —— 向宇
Vant UI零基础入门：第一个移动端H5页面开发
SapphireOwl29的博客
12-08 762
首先在template部分搭建基本结构，包括顶部的标题区域、中间的任务列表区域和底部的添加任务表单。上尝试了这个项目，发现它的一键部署功能特别方便，不用配置复杂的服务器环境就能把项目发布到线上，非常适合新手快速验证和分享自己的作品。整个开发过程很顺畅，Vant UI的文档也很清晰，建议新手朋友可以多尝试几个不同的组件，慢慢熟悉这个强大的移动端组件库。删除任务功能：给每个任务单元格添加删除按钮，点击时弹出van-dialog确认对话框，确认后从任务列表中移除该项。注意需要做简单的非空校验，避免添加空任务。
Vant UI零基础入门：5分钟创建你的第一个组件
EmeraldEagle36的博客
11-29 748
最近在开发移动端项目时接触到了Vant UI这个轻量级组件库，发现它的Button组件特别适合新手练手。编辑器左侧写代码，右侧实时显示效果，遇到错误还会立即提示。实际体验后发现，这种边学边练的方式比只看文档有效率得多，每个修改都能立刻看到反馈，特别适合刚接触前端框架的新手建立信心。就能生成默认样式的按钮。这时页面上会出现一个蓝色矩形按钮，这就是Vant最基础的按钮形态。这是最基础的交互逻辑，测试时点击按钮就能看到弹窗反馈。，按钮显示的文字就会实时更新。上特别顺畅，不需要配置环境，打开网页就能直接编写代码。
Vant零基础入门：10分钟创建第一个组件
SunstoneLion34的博客
11-29 885
最近在开发移动端项目时接触了Vant组件库，发现它的文档虽然全面，但对新手来说配置步骤还是有些分散。接着修改vite.config.js文件，在plugins配置项中添加Vant的按需导入设置。特别是当需要快速验证某个组件效果时，直接在线修改就能实时看到变化，非常适合新手学习阶段反复调试。命令，浏览器会自动打开本地开发服务器。你会看到一个带有购物车图标的蓝色按钮，点击后屏幕中央将弹出提示框，2秒后自动消失。它的在线编辑器内置了Vue3环境，无需本地安装就能直接编写代码，还能一键部署分享给他人查看效果。
Vant零基础入门：用AI快速创建第一个组件
CrystalwaveEagle34的博客
12-12 300
通过覆盖Vant的CSS变量（如。
零基础入门微信小程序开发：一篇就够
2402_82610107的博客
05-15 946
小程序是无需下载安装即可使用的"轻应用"，像手机里的瑞士军刀——即用即走，不占内存。微信小程序是最主流的小平台，类似支付宝小程序、抖音小程序等。
Vant Weapp：让微信小程序开发效率倍增的UI组件库
gitblog_00923的博客
11-22 755
还在为微信小程序的UI开发而烦恼吗？🤔 想要快速构建出专业美观的界面，却又担心开发周期过长？今天我要向你推荐一个能彻底改变你小程序开发体验的神器——Vant Weapp！ 这个由有赞团队精心打造的小程序UI组件库，自2017年开源以来，已经帮助成千上万的开发者解决了UI开发的痛点。无论你是刚入门的新手，还是经验丰富的开发者，Vant Weapp都能成为你最得力的助手。 ## 💫 为什么选择
手写rem 与 移动端vant配置rem(2)
2401_84092456的博客
04-23 847
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。。喜欢看书就看书，喜欢看视频就看视频。
10分钟上手微信小程序开发：从零开始搭建你的第一个小程序
小程序开发
07-15 789
本文目标是让完全没接触过程序开发的新手，在10分钟内完成「注册账号→安装工具→创建项目→修改代码→运行调试」的全流程，亲手做出一个能在手机上显示自定义内容的微信小程序。不涉及复杂功能（如数据库、网络请求），聚焦「搭建基础框架」这一核心目标。核心概念（用「开小店」比喻理解小程序结构）超详细操作步骤（每一步配文字+关键截图）代码修改实战（3行代码让小程序说「你好」）常见问题解决（工具安装/代码报错怎么办）必要工具：微信开发者工具（唯一官方工具，无需额外安装其他软件）；关键账号。
【实战突破】：微信小程序radio单选框组件，从入门到精通
首先，本文基础概念进行了解析，然后详细介绍了radio组件的属性、事件绑定、逻辑实现及优化技巧，并探讨了如何通过样式定制来提升用户体验。随后，本文通过综合应用案例，展示了radio组件在表单提交、数据校验以及多...
打造Vue3下的高效H5框架：vite、vuex、vue-router与vant 3.0
在这个场景下，意味着上述提到的vite、vue3、vuex、vue-router和vant3.0被整合为一个完整的开发环境，开发者可以在这个框架上迅速开始项目开发，无需从零开始配置环境或搭建基础设施。 通过提供一套完整的配置、...
130000002947823457136193789891_MatrixAdd_36148_1765656512480.zip
12-15
130000002947823457136193789891_MatrixAdd_36148_1765656512480.zip
硅微机械陀螺的系统结构以及自激振荡驱动进行Simulink仿真.zip
12-15
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Trendforce - Advancements in HBM.pdf
12-15
Trendforce - Advancements in HBM.pdf
基于UFLDL斯坦福大学深度学习教程第一课稀疏自编码器原理与实现练习的详细中文项目名称本项目是一个遵循斯坦福大学UFLDL深度学习教程第一课教学大纲的稀疏自编码器实现与原理探究项.zip
12-15
基于UFLDL斯坦福大学深度学习教程第一课稀疏自编码器原理与实现练习的详细中文项目名称本项目是一个遵循斯坦福大学UFLDL深度学习教程第一课教学大纲的稀疏自编码器实现与原理探究项.zip
坐标下降求解Lasso以及稀疏学习_基于坐标下降算法高效求解Lasso回归模型并深入探讨稀疏学习理论与应用实践_该项目专注于实现和优化坐标下降算法以解决Lasso回归问题涵盖从基.zip
12-15
坐标下降求解Lasso以及稀疏学习_基于坐标下降算法高效求解Lasso回归模型并深入探讨稀疏学习理论与应用实践_该项目专注于实现和优化坐标下降算法以解决Lasso回归问题涵盖从基.zip
GB-T 2423.56-2023 试验Fh：宽带随机振动（数字控制）和导则.rar
12-15
GB-T 2423.56-2023 试验Fh：宽带随机振动（数字控制）和导则.rar
标准日本语言-单词（可筛选）
最新发布
12-15
标准日本语言-单词（可筛选）
✅ Vue 加载结果: object vant copy 2.html:79 📦 Vue 版本: 3.5.24 vant copy 2.html:87 ✅ Vant 加载结果: undefined vant copy 2.html:88 Uncaught ReferenceError: Vant is not defined at vant copy 2.html:88:4 (匿名) @ vant copy 2.html:88 vant copy 2.html:98 Uncaught ReferenceError: Vant is not defined at vant copy 2.html:98:58
11-19
你已经确认了关键信息： ``` ✅ Vue 加载结果: object 📦 Vue 版本: 3.5.24 ✅ Vant 加载结果: undefined Uncaught ReferenceError: Vant is not defined ``` --- ## ✅ 结论：`vant.min.js` 文件 **没有正确暴露全局变量 `Vant`** 虽然文件被加载了，但它 **不是适用于 `<script>` 标签的 UMD 全局构建版本**。 > 🔥 问题出在：你下载的 `vant.min.js` 是「模块化构建」或「错误内容」，无法在浏览器全局创建 `window.Vant` --- ## 🚨 常见错误原因（你现在正踩中） | 错误 | 说明 | |------|------| | ❌ 右键“另存为”下载 `vant.min.js` | 浏览器可能缓存了 HTML 页面（如 GitHub Pages 的 404） | | ❌ 下载的是 ESM 构建版 | 不支持直接 `<script src>` 使用 | | ❌ CDN 返回重定向页面 | 某些网络环境下会返回 HTML 而不是 JS | | ❌ 文件路径对但内容是空的 | 看起来像 JS，其实是空白 | --- ## ✅ 终极解决方案：手动复制 + 正确来源 ### ✅ 第一步：打开官方可靠 URL 👉 在浏览器中访问： ``` https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js ``` > ⚠️ 必须能看到 JavaScript 代码（以 `var Vant = (function(...)` 开头），而不是网页！ --- ### ✅ 第二步：正确保存文件（不能右键另存为！） #### ✅ 正确操作流程： 1. 打开上面链接后： - 按 `Ctrl+A` 全选 - 按 `Ctrl+C` 复制 2. 打开 VS Code / 记事本 / Sublime Text 3. 新建文件 → 粘贴 4. 保存为：`assets/vant.min.js` 5. 编码选择：**UTF-8**（不要带 BOM） 6. 关闭再重新打开，搜索 `"Vant"` 和 `"Calendar"` 是否存在 ✅ 成功标志：你能看到类似代码： ```js var Vant = (function (exports, vue) { 'use strict'; ... var Calendar = { name: 'van-calendar', setup: function() { ... } }; exports.Calendar = Calendar; ... return exports; })({}, Vue); ``` 📌 注意最后一行用了 `{}, Vue`，表示它依赖全局 `Vue` --- ### ✅ 第三步：验证是否真的加载成功 在引入之后加一段调试脚本： ```html <script src="assets/vue.global.js"></script> <script> console.log("✅ Vue loaded:", typeof Vue !== 'undefined'); </script> <script src="assets/vant.min.js"></script> <script> console.log("🔍 Checking window.Vant..."); console.log("typeof Vant =", typeof Vant); // 应该输出 "object" if (typeof Vant === 'undefined') { alert("❌ Vant 未定义！\n\n请检查：\n1. vant.min.js 是否是从 https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js 手动复制粘贴的\n2. 文件内容是不是真正的 JS 而不是 HTML"); } else { console.log("🎉 Vant loaded! Components:", Object.keys(Vant)); } </script> ``` --- ### ✅ 第四步：确保使用 HTTP 服务运行（不是双击打开） ⚠️ 浏览器安全策略限制：本地 `file://` 协议下某些行为异常。 ✅ 正确启动方式： #### 方法 1：Python（最简单） ```bash cd 你的项目目录 python -m http.server 8000 ``` 然后访问：[http://localhost:8000](http://localhost:8000) #### 方法 2：Node.js（推荐） ```bash npx serve ``` --- ### ✅ 第五步：替换为你当前的资源引用（建议用在线测试先） 临时改成 CDN 测试，确认逻辑没问题： ```html <!-- 替换本地文件进行测试 --> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" /> ``` ✅ 如果这时页面正常显示日历 → 说明是你本地 `vant.min.js` 文件的问题！ --- ## ✅ 补充：如何判断 `vant.min.js` 内容是否有效？ 打开你本地的 `assets/vant.min.js` 文件，查找以下内容： | 查找关键词 | 应该出现的位置 | |-----------|----------------| | `var Vant = (` | 文件开头附近 | | `.padStart` 或 `.includes` | 表示有现代 JS 方法 | | `exports.Calendar` | 表示包含日历组件 | | `{}),Vue` 或 `{},{},Vue` | 表示依赖全局 Vue | ❌ 如果你看到这些内容，说明文件不对： - `<html>`、`<!DOCTYPE>` → 是 HTML 页面！ - `404`、`Not Found` → 请求失败 - 空白或只有几行 → 文件损坏 --- ## ✅ 最终建议：提供一个“防错版”下载方案 你可以把这个 JS 内容直接硬编码进 HTML（仅用于测试）： ```html <!-- ⚠️ 仅用于测试！正式环境不要这样做 --> <script> // 手动注入 Vant（替代 vant.min.js） fetch('https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js') .then(r => r.text()) .then(code => { eval(code); // 动态执行 JS（危险！仅测试用） console.log("✅ Vant 已通过 fetch 注入", typeof Vant); }) .catch(err => { console.error("Failed to load Vant via fetch", err); }); </script> ``` 但这只是临时绕过问题，根本解法还是 **正确保存 `vant.min.js`** --- ## ✅ 总结：你现在要做的是 | 步骤 | 操作 | |------|------| | 1 | 打开 [https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js](https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js) | | 2 | `Ctrl+A` 全选 → `Ctrl+C` 复制 | | 3 | 打开编辑器 → 新建文件 → `Ctrl+V` 粘贴 | | 4 | 保存为 `assets/vant.min.js`（UTF-8） | | 5 | 启动 HTTP 服务（`python -m http.server`） | | 6 | 刷新页面，看控制台是否输出 `typeof Vant = object` | ➡️ 只要这一步完成，你的代码就能跑起来！ ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

StarfallRaven13

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值