VUE3+Vite项目按需引入和Vant如何自动按需变成全局组件

实现方法

(1) 通过在main.js按需引入，并注册可实现（不推荐）

(2) 通过配置vite.config.js 实现

安装插件：

unplugin-vue-components （全局公共组件）

unplugin-auto-import（自动导入）

@vant/auto-import-resolver（vant的componets使用）

import Components from 'unplugin-vue-components/vite' //引入vite模块的
import AutoImport from 'unplugin-auto-import/vite' //引入vite模块的
import { VantResolver } from '@vant/auto-import-resolver'

AutoImport（vite.cofig.js的plugins配置自动导入模块）

解释

vue3的声明一个响应式变量：

未配置写法：

import {ref} from "vue"//组件手动引入vue的Ref方法；

const count=ref(0)

配置后写法（unplugin-auto-import）：

const count=ref(1)//配置后就不用再组件引入Ref方法了

import AutoImport from 'unplugin-auto-import/vite'
plugins: [
    vue(),
    AutoImport({
      imports: [
        // 预设
        'vue',
        'vue-router',
        'pinia',
      ],
      resolvers: [],
      dts: 'src/auto-import.d.ts',//生成自动导入文件的位置
    }),
]

Components (自动导入组件)

解释

如vant组件库，按以前的做法都是在main.js引入并直接全局注册了；也不管项目是否用不用到所有组件

优化的做法

项目用到vant组件，在mian.js引入，并全局注册

缺点

每次使用都需要去main.js查看是否注册，需要手动按需引入注册

 unplugin-vue-components/vite （自动生成全局组件）
 @vant/auto-import-resolver（vant的componets使用）

Components配置

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


  plugins: [
   AutoImport({
   ....
      resolvers: [VantResolver()],//AutoImport需要加入vantResover
  
    }),
    Components({
      resolvers: [VantResolver()], // 自定义组件的解析器
      dirs: ['src/components'], //自动导入组件-指定组件位置，默认是src/components
      extensions: ['vue'], // 组件的有效文件扩展名。
      dts: 'src/components.d.ts', // 配置文件生成位置-自动生成
      deep: true, // 搜索子目录
    }),
  ]

注： Components-dirs

dirs：配置的目录下的vue文件都会自动生成全局组件，无需在mian.js注册

pulgins代码如下

plugins: [
    vue(),
    AutoImport({
      imports: [
        // 预设
        'vue',
        'vue-router',
        'pinia',
      ],
      resolvers: [VantResolver()],
      dts: 'src/auto-import.d.ts',
    }),
    Components({
      resolvers: [VantResolver()], // 自定义组件的解析器
      dirs: ['src/components'], //自动导入组件-指定组件位置，默认是src/components
      extensions: ['vue'], // 组件的有效文件扩展名。
      dts: 'src/components.d.ts', // 配置文件生成位置-自动生成
      deep: true, // 搜索子目录
    }),
  ]

文档相关链接

[vant按需引入] vant-ui.github.io/vant/#/zh-C…

[Vite插件使用] cn.vitejs.dev/guide/using…

[NPM-unplugin-auto-import] www.npmjs.com/package/unp…

[NPM-unplugin-vue-components] www.npmjs.com/package/unp…