当前位置: 首页 > 工具软件 > Vant > 使用案例 >

vue3中Vant的使用

公孙森
2023-12-01

一. 安装Vant组件库

1.通过npm安装

# Vue 3 项目,安装最新版 Vant
npm i vant

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

二. 引入组件(推荐)

在基于 vitewebpack 或 vue-cli 的项目中使用 Vant 时,推荐安装 unplugin-vue-components 插件,它可以自动按需引入组件

1.安装插件

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

2.配置插件

  基于 vue-cli 的项目,在 vue.config.js 文件中配置插件:

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

三. 引入组件 

完成以上两步,就可以直接使用 Vant 组件了:

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

另外还有两种方法:

1. 导入所有组件(不推荐)

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

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);

2.手动按需引入组件(不推荐)

在不使用任何构建插件的情况下,可以手动引入需要使用的组件和样式。

// 引入组件脚本
import Button from 'vant/es/button/index';
// 引入组件样式
// 若组件没有样式文件,则无须引入
import 'vant/es/button/style/index';

这些都是根据官方文档给出的使用方法,详情可见官方 :Vant 3 - Mobile UI Components built on Vue

 类似资料: