Vue 3 搭配 Vant：移动端UI组件库集成指南

无界猴

12个月前更新

018554

Vue 3 结合 Vant (一个轻量、可靠的移动端 Vue 组件库) 的使用非常简单。以下是一些基本步骤来在 Vue 3 项目中集成 Vant：

创建 Vue 3 项目

如果你还没有 Vue 3 项目，可以使用 Vue CLI 或 Vite 创建一个新的 Vue 3 项目。

例如，使用 Vue CLI：


vue create my-vant-project  
# 选择 Vue 3 版本
vue create my-vant-project  
# 选择 Vue 3 版本
vue create my-vant-project  
# 选择 Vue 3 版本

或者使用 Vite：


npm init vite@latest my-vant-project --template vue  
cd my-vant-project  
npm install
npm init vite@latest my-vant-project --template vue  
cd my-vant-project  
npm install
npm init vite@latest my-vant-project --template vue  
cd my-vant-project  
npm install

安装 Vant

在你的 Vue 3 项目中，使用 npm 或 yarn 安装 Vant：


npm install vant  
# 或者  
yarn add vant
npm install vant  
# 或者  
yarn add vant
npm install vant  
# 或者  
yarn add vant

引入 Vant

在你的 main.js 或 main.ts 文件中，你需要引入 Vant 组件库和样式。由于 Vant 默认只支持按需引入，你可以使用 babel-plugin-import 插件来自动引入需要的组件和样式。

首先，安装 babel-plugin-import：


npm install babel-plugin-import --save-dev  
# 或者  
yarn add babel-plugin-import --dev
npm install babel-plugin-import --save-dev  
# 或者  
yarn add babel-plugin-import --dev
npm install babel-plugin-import --save-dev  
# 或者  
yarn add babel-plugin-import --dev

然后，在你的 babel.config.js 文件中配置该插件（如果你使用的是 Vue CLI 创建的项目，该文件通常位于项目根目录下）：


module.exports = {  
  presets: [  
    '@vue/cli-plugin-babel/preset',  
  ],  
  plugins: [  
    [  
      'import',  
      {  
        libraryName: 'vant',  
        libraryDirectory: 'es',  
        style: true, // `style: true` 会加载 less 样式  
      },  
      'vant',  
    ],  
  ],  
};
module.exports = {  
  presets: [  
    '@vue/cli-plugin-babel/preset',  
  ],  
  plugins: [  
    [  
      'import',  
      {  
        libraryName: 'vant',  
        libraryDirectory: 'es',  
        style: true, // `style: true` 会加载 less 样式  
      },  
      'vant',  
    ],  
  ],  
};
module.exports = {  
  presets: [  
    '@vue/cli-plugin-babel/preset',  
  ],  
  plugins: [  
    [  
      'import',  
      {  
        libraryName: 'vant',  
        libraryDirectory: 'es',  
        style: true, // `style: true` 会加载 less 样式  
      },  
      'vant',  
    ],  
  ],  
};

如果你使用的是 Vite，你需要在 vite.config.js 中配置 esbuild 或 css 选项，以确保 Vant 的样式被正确处理：


// vite.config.js  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [vue()],  
  css: {  
    preprocessorOptions: {  
      less: {  
        additionalData: `@import "vant/es/style/var.less";`  
      }  
    }  
  }  
})
// vite.config.js  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [vue()],  
  css: {  
    preprocessorOptions: {  
      less: {  
        additionalData: `@import "vant/es/style/var.less";`  
      }  
    }  
  }  
})
// vite.config.js  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [vue()],  
  css: {  
    preprocessorOptions: {  
      less: {  
        additionalData: `@import "vant/es/style/var.less";`  
      }  
    }  
  }  
})

使用 Vant 组件

现在你可以在你的 Vue 组件中按需引入和使用 Vant 组件了。例如，使用 Button 组件：


<template>  
  <div>  
    <van-button type="primary">主要按钮</van-button>  
  </div>  
</template>  
  
<script>  
// 由于已经配置了 babel-plugin-import，这里不需要显式引入组件和样式  
export default {  
  // ...  
};  
</script>
<template>  
  <div>  
    <van-button type="primary">主要按钮</van-button>  
  </div>  
</template>  
  
<script>  
// 由于已经配置了 babel-plugin-import，这里不需要显式引入组件和样式  
export default {  
  // ...  
};  
</script>
<template>  
  <div>  
    <van-button type="primary">主要按钮</van-button>  
  </div>  
</template>  
  
<script>  
// 由于已经配置了 babel-plugin-import，这里不需要显式引入组件和样式  
export default {  
  // ...  
};  
</script>