一、引入Element-UI

npm i element-ui --save
npm install element-ui -S

等待安裝完成

二、注冊組件

1、vue2使用element-ui

在main.js中注冊

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Vue3不是這種語法，請注意
Vue.use(ElementUI);

vue2全部main.js代碼

import Vue from 'vue'
import App from './App.vue'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false
Vue.use(ElementUI);new Vue({render: h => h(App),
}).$mount('#app')

注意：在使用Vue3全局注冊element的時候，發現錯誤如下：

Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype’)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/types.js:39)
at Object…/node_modules/element-ui/lib/utils/types.js (chunk-vendors.js:2923)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/util.js:19)
at Object…/node_modules/element-ui/lib/utils/util.js (chunk-vendors.js:2935)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/locale/format.js:49)
at Object…/node_modules/element-ui/lib/locale/format.js (chunk-vendors.js:2526)

那么如何解決呢，繼續往下看…

2、vue3使用element-ui

vue3中使用element-plus，它對Vue3進行了支持。

npm install element-plus --save

vue3 在main.js注冊element-plus

注意這里與Vue2的注冊有些不一樣，比如：

const app = createApp(App);

先創建app 在用 use

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus);app.mount('#app')

三、使用Element組件

1、輕微改造

啟動項目，正常顯示即代表項目運行正常

改造項目代碼

位置：HelloWorld.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
</style>

這樣代碼看上去比較簡單，干凈

2、驗證element是否生效

<template><div class="hello"><h1>{{ msg }}</h1><el-button>這是一個按鈕</el-button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
</style>

從上面的頁面可以看到，element注冊成功了