Element-Plus在VUE3中三种基本使用方法

安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

1.全局引用

在main.js/main.ts中

// element-plus 全局引用
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

全局引用很方便，但是打包时体积会大一点，如果希望打包时体积更小可以尝试以下两种方法

 2.局部引用

在组件中局部引用样式

例：如果我们使用的是button

//手动引入样式
import { ElButton } from 'element-plus'
import 'element-plus/theme-chalk/el-button.css' //el-button是按钮的样式
import 'element-plus/theme-chalk/base.css'   //整体的样式

export default defineComponent({
  name: 'App',
  components: {
    ElButton
  }
})

3.按需导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后在vue.config.js中

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
    // element-plus在vue3.0中按需自动导入
    configureWebpack: {
        plugins: [
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ],
    }
})

configureWebpack作为一个既可以使用函数，又可以使用对象的属性。设置的值既可以与其他值组合起来形成最终的配置，也可以直接更改配置。

Element-Plus官方文档中也详细说了在Vite和WebPack中的使用：

一个 Vue 3 UI 框架 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/