vant 的安装

1.vant 的安装

npm安装

在现有项目中使用vant时,可以通过npm或yarn进行安装。vue2和vue3安装方法基本相同

npm i vant -S # 安装最新版

npm i vant@latest-v2 -S # vue2项目，安装vant2
复制代码

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

通过脚手架的UI安装

如果你是通过vue官方提供的脚手架Vue Cli 创建项目的话

可以在如下位置安装

引入组件

引入方式分为三种分别是

• 自动按需引入
• 手动按需引入
• 引入全部

1.自动按需引入组件

官方推荐

需要安装一个插件：

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。 可以通过npm 的方式安装：npm i babel-plugin-import -D 使用 babel7可以在 babel.config.js 中配置

module.exports = { 
    plugins: [ 
        ['import', { 
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true 
          }, 'vant'] 
        ] 
      };
复制代码

在 main.js 中引入想要的组件。（使用button做介绍）

import { Button } from 'vant' // 引入Button组件
Vue.use(Button) // 全局注册
复制代码

（不理解可以看图）

这样你就可以在组件或页面里使用 button 组件了

2.手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件，同样使用button举例

在main.js中引入

import Button from 'vant/lib/button'; 
import 'vant/lib/button/style';
Vue.use(Button) // 全局注册button
复制代码

3.导入所有组件

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

同样在main.js中引入

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

注意：配置按需引入后，不允许直接导入所有组件。

将babel.config.js中的代码注释

入所有组件。

[外链图片转存中…(img-KNUftIkT-1651230826239)] 将babel.config.js中的代码注释 [外链图片转存中…(img-51GBFiYU-1651230826240)]