vue3中element-plus的自动化导入

前言

vue3的使用慢慢要取代vue2，最近研究到了vue3搭配element框架。知道你们有些人不喜欢看官网，我就把官网的方法搬运过来。

一、element-plus是什么？

element-plus 面向设计师和开发者的组件库。

二、使用步骤

1.在vue.config.js中进行配置，没有就创建。

代码如下（示例）：

const { defineConfig } = require("@vue/cli-service")
const AutoImport = require("unplugin-auto-import/webpack")
const Components = require("unplugin-vue-components/webpack")
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

  测试的vue文件

<template>
  <div class="home">
    <el-button type="primary">Primary</el-button>
    <el-button>按钮</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "HomeView",
  components: {},
  setup() {
    return {}
  }
})
</script>

2.截图

---

总结：

多看官网，多总结。