Vant使用方法（vue2版本）

Vant 简单学习（vue2版本）

1. 安装 说明：本次安装只针对vue2版本的脚手架进行安装

通过npm安装

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2

通过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>

注意：

1. 通过 CDN 引入时不会自动注册 Lazyload 组件
2. 可以通过下面的方式手动注册

Vue.use(vant.Lazyload);

注意：免费 CDN 一般用于制作原型或个人小型项目，不推荐在企业生产环境中使用免费 CDN。

对于企业开发者，建议使用以下方式：

• 通过 npm 引入，并通过构建工具进行打包
• 下载对应文件，并托管在你自己的服务器或 CDN 上

2. 引入组件与使用

2.1 引入组件

一、自动按需引入组件

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