uniapp +vant ui4如何快速集成使用

在uniapp项目中如何快速集成vant ui4组件库？需要配置哪些步骤？有没有现成的模板或demo可以参考？集成过程中有哪些需要注意的兼容性问题？

2 回复

在uniapp项目中安装vant ui4：

npm i vant@next

然后在main.js中引入：

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

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

按需引入可在vite.config.js中配置自动导入。


在 UniApp 中集成 Vant UI 4 非常简单，只需以下步骤：

1. 安装 Vant UI 4

通过 npm 或 yarn 安装：

npm install vant@latest-v4
# 或
yarn add vant@latest-v4

2. 引入组件

在 main.js 中全局引入：

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

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

或按需引入（推荐，减小包体积）：

import { Button, Cell } from 'vant'
app.use(Button).use(Cell)

3. 配置按需引入（可选）

安装 @vant/auto-import-resolver 和 unplugin-vue-components：

npm i @vant/auto-import-resolver unplugin-vue-components -D

在 vite.config.js 中配置：

import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'

export default {
  plugins: [
    Components({
      resolvers: [VantResolver()],
    }),
  ],
}

4. 使用组件

在页面中直接使用：

<template>
  <van-button type="primary">按钮</van-button>
  <van-cell title="单元格" value="内容" />
</template>

5. 主题定制（可选）

在 vue.config.js 中配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'blue': '#007bff'
          }
        }
      }
    }
  }
}

注意事项：

  • 确保 UniApp 项目基于 Vue 3
  • Vant 4 仅支持 Vue 3，与 Vue 2 不兼容
  • 使用 HBuilder X 创建项目时选择 Vue 3 模板

完成以上步骤后即可快速开始使用 Vant UI 4 组件开发 UniApp 应用。

回到顶部