1. 说在前面
1.1 这是一件令我比较无语的事情
最近使用 Vue3.0 + vant开发项目，官网上的配置，按需引入其实不太好理解
于是想着“面向百度编程”，百度下看看，结果网上有很多人连Vue3.0和vue-cli3.0都分不清楚，找了半天都是vue-cli3.0的（有同感的可以评论区扣个1）我人都傻了，于是自己摸索了一个正确的操作方式
1.2 Vant ui简介
Vant 适用于移动端
Vant 是有赞前端团队开源的移动端组件库，十大受欢迎组件库之一，用户量挺大的，10w+（所以生态还是不错的）
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
2. Vant ui安装
2.1 npm安装
# Vue 2 项目，安装 Vant 2 npm i vant@2 # Vue 3 项目，安装 Vant 3 npm i vant@3
2.2 其它安装方式
# 通过 yarn 安装 yarn add vant@3 # 通过 pnpm 安装 pnpm add vant@3
3. 配置按需引入
3.1 webpack依赖
- 通过 babel 插件按需引入组件(与element ui 同)
# 安装插件 npm i babel-plugin-import -D
- 在.babelrc 或 babel.config.js 中添加配置(项目中没有的话自己建立一个)
module.exports = { "plugins": [ [ "import", { "libraryName": "vant", "libraryDirectory": "es", "style": true } ] ] }
3.2 Vite构建的项目
- 在 Vite 项目中按需引入组件
# 安装插件 npm i vite-plugin-style-import -D
- vite.config.js文件配置
import vue from '@vitejs/plugin-vue'; import styleImport from 'vite-plugin-style-import'; export default { plugins: [ vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ], };
4. 配置main.js（官网上说的估计小白看不懂）
- 与Vue2.x 的通过Vue.use(某组件)不同
- Vue3.0的组件注册需要通过 createApp(App)
- 这里配置了按需引入，注释也写了，很明朗（如下：）
import { createApp } from 'vue' import App from './App.vue' // 需要啥组件就引进来 import { Button, Rate } from 'vant' let app = createApp(App) // 这里与Vue2中的Vue.use()不同 app.use(Button) app.use(Rate) app.mount('#app')
5. 页面中使用按需引入的组件
- 这里和element ui一样的，以我刚注册的两个组件使用为例：
<template> <div class="hello"> <van-button type="primary">主要按钮</van-button> <van-rate v-model="value" /> </div> </template>
效果图如下，搞定：
