5.在项目中集成elenment-plus

最新推荐文章于 2025-04-20 23:38:00 发布

要成为光的女人

最新推荐文章于 2025-04-20 23:38:00 发布

阅读量648

点赞数

分类专栏：项目搭建规范文章标签：大数据

本文链接：https://blog.youkuaiyun.com/weixin_51614564/article/details/125835387

版权

项目搭建规范专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用Element-Plus组件库，包括全局和局部引入的方式。全局引入只需在main.ts中简单配置，而局部引入则涉及babel-plugin-import的安装和配置，以实现按需加载组件并优化打包体积。此外，还展示了如何封装公共组件库，使组件在页面中直接可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装element-plus

npm install element-plus

1.1全局引入

（1）全局引用：

缺点：全部打包，打包东西比较多

优点：集成比较简单

在main.ts 入口文件引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus' //引入组件库
import 'element-plus/theme-chalk/index.css'  //引入组件样式
const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus)
app.mount('#app')

案例：

1.2.局部引入，按需引入：

优点：包会小一些

缺点：引用起来会麻烦一点

在组件里面引入注册

如果我们现在想在写el-button 时，希望自动的帮我们匹配对应的样式，这时候可以使用一个插件：

npm install babel-plugin-import -D

//在babel.config.js 文件做一下相关的配置（base.css还是建议写在main.ts里面）
module.exports = {
    plugins:[
      [
        //通过import引入从element-plus 这个库引用东西的时候
        'import',
        {
          libraryName:'element-plus',
          //同时也要引入这个自定义的样式
          customStyleName:(name)=>{
            return  `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
      ],
  presets: ['@vue/cli-plugin-babel/preset']
}

局部引入封装公共组件库；

优化代码，让组件在页面直接可以使用

（1）在src下面直接新建一个文件global 全局的配置相关的都可以在这里做一些局部配置

//入口文件
import {App} from 'vue'
import 'element-plus/theme-chalk/index.css'
import {
  ElAside,
  ElButton,
  ElFormItem,
  ElIcon,
  ElRadio,
  ElInput
} from 'element-plus'

const components = [ElAside, ElButton, ElFormItem, ElIcon, ElRadio, ElInput]

export function registerApp(app:App):void{
  for (const component of components) {
    app.component(component.name, component)
  }
}

（2）在去main.ts 里面去注入这个样式