vue cli3 使用elemet-plus

原文章：

https://blog.csdn.net/qq_44827865/article/details/115457445

element-plus官方网站：https://element-plus.gitee.io/#/zh-CN/component/installation

甲：为什么在vue3.0中不能使用Element UI了？
乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。
甲：那有什么方法能解决吗？
乙：使用Element UI的升级版element-plus

1、element-plus 安装

npm install element-plus --save

2、引入 Element Plus

2.1 完整引入

在 main.js /ts中写入以下内容：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2.2 按需引入

（1）安装 babel-plugin-import:

npm install babel-plugin

（2）将 babel.config.js 修改为：

复制代码
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
};
复制代码

（3）创建 src/plugins/elements.js文件

文件内容如下：

复制代码
  1 import {
  2     ElAlert,
  3     ElAside,
  4     ElAutocomplete,
  5     ElAvatar,
  6     ElBacktop,
  7     ElBadge,
  8     ElBreadcrumb,
  9     ElBreadcrumbItem,
 10     ElButton,
 11     ElButtonGroup,
 12     ElCalendar,
 13     ElCard,
 14     ElCarousel,
 15     ElCarouselItem,
 16     ElCascader,
 17     ElCascaderPanel,
 18     ElCheckbox,
 19     ElCheckboxButton,
 20     ElCheckboxGroup,
 21     ElCol,
 22     ElCollapse,
 23     ElCollapseItem,
 24     ElCollapseTransition,
 25     ElColorPicker,
 26     ElContainer,
 27     ElDatePicker,
 28     ElDialog,
 29     ElDivider,
 30     ElDrawer,
 31     ElDropdown,
 32     ElDropdownItem,
 33     ElDropdownMenu,
 34     ElFooter,
 35     ElForm,
 36     ElFormItem,
 37     ElHeader,
 38     ElIcon,
 39     ElImage,
 40     ElInput,
 41     ElInputNumber,
 42     ElLink,
 43     ElMain,
 44     ElMenu,
 45     ElMenuItem,
 46     ElMenuItemGroup,
 47     ElOption,
 48     ElOptionGroup,
 49     ElPageHeader,
 50     ElPagination,
 51     ElPopconfirm,
 52     ElPopover,
 53     ElPopper,
 54     ElProgress,
 55     ElRadio,
 56     ElRadioButton,
 57     ElRadioGroup,
 58     ElRate,
 59     ElRow,
 60     ElScrollbar,
 61     ElSelect,
 62     ElSlider,
 63     ElStep,
 64     ElSteps,
 65     ElSubmenu,
 66     ElSwitch,
 67     ElTabPane,
 68     ElTable,
 69     ElTableColumn,
 70     ElTabs,
 71     ElTag,
 72     ElTimePicker,
 73     ElTimeSelect,
 74     ElTimeline,
 75     ElTimelineItem,
 76     ElTooltip,
 77     ElTransfer,
 78     ElTree,
 79     ElUpload,
 80     ElInfiniteScroll,
 81     ElLoading,
 82     ElMessage,
 83     ElMessageBox,
 84     ElNotification,
 85 } from "element-plus";
 86 
 87 
 88 const components = [
 89     ElAlert,
 90     ElAside,
 91     ElAutocomplete,
 92     ElAvatar,
 93     ElBacktop,
 94     ElBadge,
 95     ElBreadcrumb,
 96     ElBreadcrumbItem,
 97     ElButton,
 98     ElButtonGroup,
 99     ElCalendar,
100     ElCard,
101     ElCarousel,
102     ElCarouselItem,
103     ElCascader,
104     ElCascaderPanel,
105     ElCheckbox,
106     ElCheckboxButton,
107     ElCheckboxGroup,
108     ElCol,
109     ElCollapse,
110     ElCollapseItem,
111     ElCollapseTransition,
112     ElColorPicker,
113     ElContainer,
114     ElDatePicker,
115     ElDialog,
116     ElDivider,
117     ElDrawer,
118     ElDropdown,
119     ElDropdownItem,
120     ElDropdownMenu,
121     ElFooter,
122     ElForm,
123     ElFormItem,
124     ElHeader,
125     ElIcon,
126     ElImage,
127     ElInput,
128     ElInputNumber,
129     ElLink,
130     ElMain,
131     ElMenu,
132     ElMenuItem,
133     ElMenuItemGroup,
134     ElOption,
135     ElOptionGroup,
136     ElPageHeader,
137     ElPagination,
138     ElPopconfirm,
139     ElPopover,
140     ElPopper,
141     ElProgress,
142     ElRadio,
143     ElRadioButton,
144     ElRadioGroup,
145     ElRate,
146     ElRow,
147     ElScrollbar,
148     ElSelect,
149     ElSlider,
150     ElStep,
151     ElSteps,
152     ElSubmenu,
153     ElSwitch,
154     ElTabPane,
155     ElTable,
156     ElTableColumn,
157     ElTabs,
158     ElTag,
159     ElTimePicker,
160     ElTimeSelect,
161     ElTimeline,
162     ElTimelineItem,
163     ElTooltip,
164     ElTransfer,
165     ElTree,
166     ElUpload,
167 ]
168 const plugins = [
169     ElInfiniteScroll,
170     ElLoading,
171     ElMessage,
172     ElMessageBox,
173     ElNotification,
174 ]
175 const installElement = (app) => {
176     components.forEach((component) => {
177         app.component(component.name, component)
178     })
179 
180     plugins.forEach((plugin) => {
181         app.use(plugin)
182     })
183 }
184 
185 export {
186     installElement
187 }
复制代码

（4）在main.js导入

复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入Element
import { installElement } from "./plugins/elements";

const app = createApp(App)
// 调用installElement
installElement(app)

// 使用installElement
createApp(App).use(store).use(router).use(installElement).mount('#app')
复制代码

 

posted @   凉面好好吃  阅读(905)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae