vue3.x + ts + element-plus 的按需导入问题！！！

时间

时间是 2021年7月，程序的版本更新很快，可能这篇文章在不久之后就没有作用了呢！

问题：

在使用 vue3.x 时，想使用 element-ui 来搭建界面，听说不支持，vue3.x 支持的是 element-plus 然后这个是 官网 https://element-plus.gitee.io/#/zh-CN 。
然后，在按需导入时，按照官网的步骤，总弄不好，可能是我太笨了，然后才到网上找，重要找到了一篇文章 博客园的 祁腾飞 。

使用步骤：

1. 下载：

admin > npm i element-plus --save

2-1. 完全引入：

在项目的入口文件中 main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2-2. 按需引入：

1、下载插件

$ npm install babel-plugin-import -D

2、导入组件

在 src 下创建文件夹 plugins

src / plugins / element-plus.ts

import { ElButton, ElMessageBox } from 'element-plus'
export const components: any[] = [
  ElButton
]
export const plugins: any[] = [ElMessageBox]

然后在入口文件中 main.ts 中

src / main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// Element Plus
import 'element-plus/lib/theme-chalk/index.css'
import { components, plugins } from './plugins/element-plus'

const app = createApp(App);

// 按需导入Element Plus组件和插件
components.forEach(component => {
  app.component(component.name, component)
})
plugins.forEach(plugin => {
  app.use(plugin)
})

app.use(store).use(router).mount('#app')

3、使用

<template>
  <div>
    <el-button>默认按钮</el-button>
  </div>
</template>

就可以了！！！，不会报错说，不识别 element 组件了，这个是在网上看到的 。

4、警告

使用后，在 src / plugins / element-plus.ts 会报 any 的错误，我不太会 ts，不知道如何处理，只能关闭这个 警告了 。

admin / package.json

 "rules": {
      "@typescript-eslint/no-explicit-any": ["off"]
  }

就基本可以了。

文章参考

• 博客园的 祁腾飞