vue3 使用element-plus 按需引入

1：npm install element-plus --save

2： 
组件按需引入所需插件：unplugin-auto-import 、 unplugin-vue-components
图标按需引入所需插件：unplugin-auto-import 、 unplugin-icons

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

 

 

3：修改 vite.config.ts 文件

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 Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"

// https://vitejs.dev/config/
export default defineConfig(() => {
  return {
    plugins: [
      vue(),
      AutoImport({
        resolvers:[
          ElementPlusResolver(),
          IconsResolver({
            prefix: 'Icon'
          })
        ]
      }),
      Components({
        resolvers:[
          ElementPlusResolver(),
          IconsResolver({
            enabledCollections: ['ep']
          })
        ]
      }),
      Icons({
        autoInstall: true
      })
    ]
  }
})

　

4： App.vue(设置组件语言)
<template>
  <el-config-provider :locale="locale">
    <router-view ></router-view>
  </el-config-provider>
</template>

<script setup lang="ts">
  import {ref} from "vue"
  import { ElConfigProvider } from 'element-plus'
  import zhCn from 'element-plus/lib/locale/lang/zh-cn'
  const locale = ref(zhCn)
</script>

　　

5：组件中使用
<template>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  
    <el-row>
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </el-row>
    <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
      />
  </template>
  
  <script lang="ts" setup>
  import {ref} from "vue"
  import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
  } from '@element-plus/icons-vue'
  const value1 = ref('')
  </script>