下载吧 ● 其他软件

分类分类

Vant(移动端组件库)

Vant(移动端组件库)

v3.0.13 官方版

大小：22.2 MB 更新：2024/06/02

类别：其他软件系统：WinAll

立即下载

　　Vant是一套轻量、可靠的移动端组件库，使用该库用户可以快速搭建出风格统一的页面，提升开发效率，Vant 提供了一套默认主题，同时用户可以更加个人喜好对主题进行设置，该软件的CSS命名采用 BEM 的风格，方便使用者覆盖样式，对于需要完全替换主题色或者其他样式，可以按照本文档进行主题定制；Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一，内置消息提示功能，可在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景，非常方便实用。

Vant(移动端组件库)

软件功能

　　提供 60 多个高质量组件，覆盖移动端各类场景

　　性能极佳，组件平均体积不到 1kb（min+gzip）

　　单元测试覆盖率 90%+，提供稳定性保障

　　完善的中英文文档和示例

　　支持 Vue 2 & Vue 3

　　支持按需引入

　　支持主题定制

　　支持国际化

　　支持 TypeScript

　　支持 SSR

软件特色

　　轻量化

　　作为移动端组件库，Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系，Vant 内部使用了很多的优化方式，包括支持组件按需加载、公共模块复用、组件编译流程优化等。

　　在应用一系列的优化手段之后，目前 Vant 的组件平均体积仅有 8.8KB，Uglify + Gzip 后约 1KB。

　　丰富实用的业务组件

　　Vant 不只是提供基础的UI组件，为了方便开发者快速构建移动商城，Vant 增加了许多移动商城内常用的业务组件。类似于地址管理、优惠券、省市县选择等。

官方教程

　　通过 npm 安装

　　在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

Vant(移动端组件库)

　　通过 CDN 安装

　　使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。

Vant(移动端组件库)

　　通过脚手架安装

　　在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。

Vant(移动端组件库)

　　在图形化界面中，点击 依赖 -> 安装依赖，然后将 vant 添加到依赖中即可。

　　示例

　　示例工程

　　我们提供了丰富的示例工程，通过示例工程你可以了解如下内容：

　　基于 Vue Cli 和 Vant 搭建应用

　　基于 Nuxt 和 Vant 搭建应用

　　配置按需引入组件

　　配置基于 Rem 的适配方案

　　配置基于 Viewport 的适配方案

　　配置基于 TypeScript 的工程

　　配置自定义主题色方案

　　引入组件

　　方式一. 自动按需引入组件 (推荐)

　　babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

Vant(移动端组件库)

　　Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入。

　　方式二. 手动按需引入组件

　　在不使用插件的情况下，可以手动引入需要的组件。

Vant(移动端组件库)

　　方式三. 导入所有组件

　　Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

Vant(移动端组件库)

　　Tips: 配置按需引入后，将不允许直接导入所有组件。

常见问题

　   在 HTML 中无法正确渲染组件？

　　在 HTML 中使用 Vant 组件时，你可能会碰到部分示例代码无法正确渲染的情况，比如下面的用法：

Vant(移动端组件库)

　　这是因为 HTML 并不支持自闭合的自定义元素，也就是说 这样的语法是不被识别的，使用完整的闭合标签可以避免这个问题：

Vant(移动端组件库)

　　在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。

更新内容

　　v2.12.6

　　2021-01-26

　　Feature

　　Icons: 新增 wechat 图标, 重命名原 wechat 图标为 wechat-pay b3cd8c

　　Bug Fixes

　　修复部分地区无法访问 CDN 静态资源的问题 #8000

　　perf

　　Sku: 优化图标加载性能 #7992

相关文章
  • 最新排行
  • 最热排行
  • 评分最高
其他软件排行榜

点击查看更多

点击查看更多

点击查看更多