Vue3.0项目按需引入element-plus

hahahahadoop

已于 2022-02-16 17:10:49 修改

阅读量1.6k

点赞数 2

分类专栏： element-plus vue3 文章标签： vue.js 前端

于 2022-02-16 15:19:44 首次发布

本文链接：https://blog.csdn.net/wj624/article/details/122962492

版权

本文详细介绍了如何在Vue3.0项目中实现element-plus的按需引入，包括安装、配置babel.config.js，创建plugins文件夹及element.js，以及在组件中按需使用的方法。

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

（1）首先先在项目中安装element-plus

cnpm install element-plus --save

（2）安装一个按需导入插件

cnpm install babel-plugin-import -D

（3）在项目中配置babel.config.js，如果没有则自行创建一个

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-plus',    // 框架名
        styleLibraryName: 'theme-chalk'  // 样式名称
      }
    ]
  ]
}

（5）创建一个plugins文件夹，里面创建一个element.js

// 引入特定组件及样式
import 'element-plus/lib/theme-chalk/index.css'
import {
  ElButton,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
}  from 'element-plus'

//注册特定组件
const components = [
    ElButton,ElContainer,ElHeader,ElMain,ElAside
]

export default (app) => {
    components.forEach(component => {
      app.component(c