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

他在时间门外

已于 2022-09-05 14:53:59 修改

阅读量2.4k

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-07-25 00:00:00 首次发布

本文链接：https://blog.csdn.net/H_jrqn/article/details/125659930

版权

本文介绍了在 Vue3 项目中如何高效地安装和使用 Element-Plus UI 框架，包括通过 NPM、Yarn 或 pnpm 安装，以及全局引用、局部引用和按需导入的方法。全局引用方便快捷但可能导致打包体积增大，局部引用和按需导入则能优化打包大小。此外，还推荐了使用 unplugin-vue-components 和 unplugin-auto-import 插件实现自动按需导入。

摘要由CSDN通过智能技术生成

安装

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

# 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作为一个既可以使用函数，又可以使用对象的属性。设置的值既可以与其他值组合起来形成最终的配置，也可以直接更改配置。