什么？都快2025了，Vue3引入组件还需用import?

由于之前接触了 defineAsyncComponent 所以知道他的可以异步导入组件的。那么这样的话，是不是能更好的提高性能呢？答案是肯定的！！！

有小伙伴不知道 defineAsyncComponent 是什么的，可以看看我这篇博客defineAsyncComponent 。

现在的前端开发基本上都要去模块化，分组件等。这都是为了代码可以更好的维护，那么大家有没有遇到一种烦恼呢？就是一上来就需要疯狂的import 许多的组件，这样是不是很麻烦呢？那么现在我为大家提供两种解决办法。这两种方法，对应不同的功能型组件。

全局组件

全局组件的话，既然大家使用的是vue3 ,那么对应的构建工具vite是有插件来帮助大家来实现的。它就是 unplugin-vue-components/vite 。

使用方法如下：

1.安装

bash 复制代码

yarn add unplugin-vue-components -D

2.配置

javascript 复制代码

import Components from 'unplugin-vue-components/vite'

const viteConfig = defineConfig(mode => {
    return {
        plugins:[
              Components({
                dts: 'src/components.d.ts',// 组件声明位置 无论用的是js也好ts也罢都能使用
                dirs: ['src/components'],// 全局组件存放位置
              })
        ]
    }
})

3.使用

html 复制代码

<template>
  <div>
    <Header />
  </div>
</template>

没错，这Header组件不需要 import 就可以全局使用。

局部组件

局部组件就是非全局组件，例如：

我的Home/components下面就有3个局部组件，这些组件只会给Home的路由页面index使用，当然其他的页面也是能用的。那么这里就需要使用到 defineAsyncComponent 来实现了。实现步骤如下:

1.首先在一个文件夹中，放一个常用方法的文件。

这里面的方法采用默认暴露。

javascript 复制代码

import { defineAsyncComponent } from "vue"

/**
 * @function 异步加载组件
 * @param {String} path 组件路径 
 * @returns 
 */
const asyncLoadComponent = (path) => {
    const pagesComponents = import.meta.glob('@/pages/**/components/*.vue')
    const comsKeys = Object.keys(pagesComponents)
    const coms = comsKeys.filter(com => com.includes(path))
    return defineAsyncComponent({
        loader: pagesComponents[coms[0]],
        delay: 0
    })
}

export default {
    asyncLoadComponent
}

2.注册为全局可以调用的函数，在main.js中进行注册。

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import Function from '@/common/function'

const app = createApp(App)

// 挂载全局方法
const funKey = Object.keys(Function)
funKey.forEach(key => {
    app.config.globalProperties[`$${key}`] = Function[key]// 加入$好辨识
})

// use其他内容...

app.mount('#app')

3.使用

如果是在 template中，那就可以直接使用。

html 复制代码

<template>
  <div class="home">
    <div class="wc">
      <component :is="$asyncLoadComponent('DataPanel')" />
      <div class="home_center">
        <component :is="$asyncLoadComponent('NewInfo')" />
        <div class="center_right">
          <img class="gg" src="https://cdn.uviewui.com/uview/swiper/swiper1.png">
          <component :is="$asyncLoadComponent('OneDayHot')" />
        </div>
      </div>
    </div>
  </div>
</template>

如果在语法糖中，那么我们还需要使用一个插件 unplugin-auto-import/vite 这个会自动引入vue相关的一些api。只需在vite.config.js中配置即可。

javascript 复制代码

import AutoImport from 'unplugin-auto-import/vite'

...
plugins: [
   AutoImport({
        imports: ["vue", "vue-router"]
   })
]
...

配置完成就可以在setup语法糖中直接使用了。

javascript 复制代码

<script setup>
const { proxy } = getCurrentInstance();
console.log(proxy.$asyncLoadComponent('DataPanel'))
</script>

使用这两个方法，就可做到引入组件无需import啦~