Vue3 vant组件库自动导入

实现:完整使用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

【二】批量引入

在基于 vitewebpackvue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。

注意:该插件不会自动引入 函数式组件 样式,详情查看:

https://blog.csdn.net/m0_73461567/article/details/129191725?spm=1001.2014.3001.5501

  1. 安装 unplugin-vue-components 插件:

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

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

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

  1. 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))
    }
  }
})
  1. 使用:





你可能感兴趣的:(Vue,vue.js,前端,javascript,前端框架,typescript)