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')