实现:完整使用vant组件库
文档
安装:
# Vue 3 项目,安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant
【一】按需引入:
https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi
【二】批量引入
在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。
注意:该插件不会自动引入 函数式组件 样式,详情查看:
https://blog.csdn.net/m0_73461567/article/details/129191725?spm=1001.2014.3001.5501
安装 unplugin-vue-components 插件:
# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D
vite.config.ts 配置插件,关闭自动生成类型声明文件
+ import Components from 'unplugin-vue-components/vite';
+ import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
vue(),
Components({
+ dts: false, // 关闭:自动生成 组件类型声明文件
+ resolvers: [VantResolver()],
// resolvers: [VantResolver({ importStyle: false })]
})
],
server: {
port: 3200,
open: true
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
使用:
<script setup lang="ts">
</script>
<template>
<!-- 直接使用vant组件 -->
<van-button>按钮</van-button>
</template>
<style scoped></style>