项目中如何导入 Vant 组件库

Vant 介绍 

        Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用。   

• 官方文档
• GitHub 仓库

下面是在 Vant 官网中列出的一些优点：

• 60+ 高质量组件

• 90% 单元测试覆盖率

• 完善的中英文文档和示例

• 支持按需引入

• 支持主题定制

• 支持国际化

• 支持 TS

• 支持 SSR

在我们的项目中主要使用 Vant 作为核心组件库，下面我们根据官方文档将 Vant 导入项目中。

将 Vant 引入项目一共有四种方式：

方式一：自动按需引入组件

• 和方式二一样，都是按需引入，但是加载更方便一些（需要额外配置插件）
• 优点：打包体积小
• 缺点：每个组件在使用之前都需要手动加载注册

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

• 在不使用插件的情况下，可以手动引入需要的组件
• 优点：打包体积小
• 缺点：每个组件在使用之前都需要手动加载注册

方式三：导入所有组件

• Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
• 优点：导入一次，使用所有
• 缺点：打包体积大

方式四：通过 CDN 引入

• 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量vant访问到所有组件。
• 优点：适合一些演示、示例项目，一个 html 文件就可以跑起来
• 缺点：不适合在模块化系统中使用

这里建议为了前期开发的便利性我们选择方式三：导入所有组件，在最后做打包优化的时候根据需求配置按需加载以降低打包体积大小。

安装 Vant

npm i vant

在 main.js 中加载注册 Vant 组件  (下面为全局导入方式) 

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

查阅文档使用组件

 Vant 的文档非常清晰，左侧是组件目录导航，中间是效果代码，右边是效果预览。

例如我们在根组件使用 Vant 中的组件：

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

如果在页面中能够正常的看到下面的效果，则说明 Vant 导入成功了。

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
 

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。