vue3 Element-plus 的配置（按需引入，完整引入）_element-plus 组件引入方式

1.快速开始 | Element Plus (element-plus.org)

# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus

1.完整 引入（如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便）

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

2.按需引入

 安装这两个插件

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

3.在vite config中配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

 

 使用例子

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
 
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需 引入

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>
 
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
 
export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

：