自动引用elementplus组件

1、Vue项目中安装 Element Plus

# NPM
$ npm install element-plus --save


# Yarn
$ yarn add element-plus


# pnpm
$ pnpm install element-plus

2、组件按需引入配置

Vant按需引入- - -安装：unplugin-vue-components 插件

unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）

使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue'这样的代码了，插件会自动识别 template中使用的自定义组件并自动注册。

unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。

1.安装插件

下载按需引入组件的插件

npm i -D unplugin-vue-components unplugin-auto-import

2、在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// import 'element-plus/es/components/button/style/css'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 按需引入Element-plus 
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: false })]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
})

3、Element Plus 实现Icon图标的自动导入

3.1、下载安装：iocns插件

1、先安装：npm i -D unplugin-vue-components unplugin-auto-import

 

2、再安装：npm i -D @element-plus/icons-vue unplugin-icons 

3.2、在vite.config.js中配置即可

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// 自动导入Icon图标
import IconResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";

// import 'element-plus/es/components/button/style/css'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 按需引入Element-plus //引入icon
    AutoImport({
      resolvers: [
        ElementPlusResolver({ importStyle: false }), // 组件自动导入
        IconResolver({ prefix: "icon" }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),// 组件自动导入
        IconResolver({
          //prefix: 'icon',          // 修改Icon组件前缀，不设置则默认为i,禁用则设置为false
          enabledCollections: ["ep"] // 指定collection，即指定为elementplus图标集ep
        }),
      ],
    }),
    Icons({ scale: 1, defaultClass: "inline-block", autoInstall: true }),
  ],
})