Vant(移动端组件库) 官方版v3.0.6

Vant是有赞前端团队开源的移动端组件库，对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。提供了丰富的组件插槽，通过插槽可以对组件的某一部分进行个性化定制。同时用户可以自己定制主题，打造属于自己风格的主题界面。

软件特色

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

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

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

完善的中英文文档和示例

支持 Vue 2 & Vue 3

支持按需引入

支持主题定制

支持国际化

支持 TypeScript

支持 SSR

安装方法

通过 npm 安装

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

# Vue 2 项目，安装 Vant 2： npm i vant -S # Vue 3 项目，安装 Vant 3： npm i vant@next -S

通过 CDN 安装

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

<!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script> <script> // 在 #app 标签下渲染一个按钮组件 new Vue({ el: '#app', template: `<van-button>按钮</van-button>`, }); // 调用函数组件，弹出一个 Toast vant.Toast('提示'); // 通过 CDN 引入时不会自动注册 Lazyload 组件 // 可以通过下面的方式手动注册 Vue.use(vant.Lazyload); </script>

通过脚手架安装

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

# 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 创建完成后，可以通过命令打开图形化界面，如下图所示 vue ui

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

更新内容

新增 finish-icon 插槽

新增 finish-icon 属性

修复 v-model 为 null 时初始值不正确的问题

修复 linearGradient id 可能导致冲突的问题