Vant详解

Vant是一套轻量级 可靠性强的移动组件库同时海内置了很多组件供开发人员进行开发

vant快速上手

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

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

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

通过 npm 安装

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

引入

在入口文件中使用这个进行按需引入

import 需要的组件 from 'vant/lib/button';
import 'vant/lib/button/style';

在入口文件中使用这个进行全局引入

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

常见问题

常见问题

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

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

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" />
</van-cell-group>

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

<van-cell-group>
  <van-cell title="单元格" value="内容"></van-cell>
  <van-cell title="单元格" value="内容"></van-cell>
</van-cell-group>

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