如何在vue3 中引入Element plus.并且不用在组件里注册就能使用

// tsconfig.json
{
  "compilerOptions": {
// ...
"types": ["element-plus/global"]
  }
}

// vite.config.ts

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

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

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'



export default {

  plugins: [

    // ...

    AutoImport({

      resolvers: [ElementPlusResolver()],

    }),

    Components({

      resolvers: [ElementPlusResolver()],

    }),

  ],

}

const AutoImport = require('unplugin-auto-import/webpack')

const Components = require('unplugin-vue-components/webpack')

const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')



module.exports = {

  // ...

  configureWebpack: {

    plugins: [

      AutoImport({

        resolvers: [ElementPlusResolver()]

      }),

      Components({

        resolvers: [ElementPlusResolver()]

      })

    ]

  }

}

// 从vue 中导入APP类型

import { App } from 'vue'

// 导入我们们的组件注册声明文件

import registerElement from './register-element'

// 导出（暴露）我们的主接口方便main接口调用使用

export function globalRegister(app: App): void {

  // 使用use函数安装我们的registerElement

  app.use(registerElement)

}

import { App } from 'vue'

// 导入我们的element-plus的css文件

import 'element-plus/dist/index.css'

// 把我们需要使用的组件进行导入

import {

  ElButton,

  ElCheckbox,

  ElForm,

  ElFormItem,

  ElInput,

  ElLink,

  ElRadio,

  ElTabPane,

  ElTabs

} from 'element-plus' // 需要的就导入

// 把我们要使用的组件名放入一个数组里面

const components = [

  ElButton,

  ElForm,

  ElFormItem,

  ElInput,

  ElRadio,

  ElTabs,

  ElTabPane,

  ElCheckbox,

  ElLink // 需要的就导入

]



export default function (app: App): void {

  // 循环我们的组件名数组进行全局注册

  for (const component of components) {

    app.component(component.name, component)

  }

}

import { globalRegister } from '../global'

createApp(App).use(globalRegister).mount('#app')