Element-UI 官網(wǎng)地址：https://element.eleme.cn/#/zh-CN?

完整引入：會將全部組件打包到項目中，導(dǎo)致項目過大，首次加載時間過長。

?下載 Element-UI

一、打開項目，安裝 Element-UI 組件庫。

?使用命令：

npm i element-ui -S

?完整引入：

一、在 main.js 文件中，引入組件庫和組件樣式。

import Vue from 'vue'
import App from './App.vue'
import router from './router'// 1.引入 Element-UI 組件庫
import ElementUI from 'element-ui';
// 2.引入 Element-UI 組件樣式
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false// 3.使用 Element-UI 組件庫
Vue.use(ElementUI);new Vue({router,render: h => h(App)
}).$mount('#app')

二、在官網(wǎng)中找到需要的組件，復(fù)制對應(yīng)的代碼。

三、創(chuàng)建 Home.vue 頁面，將代碼粘貼到頁面中。

<template><el-row><el-button>默認(rèn)按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button></el-row>
</template><script>
export default {name: "Home",
}
</script>

四、最終效果

?原創(chuàng)作者：吳小糖

?創(chuàng)作時間：2023.8.14