2.6　全局引用Element Plus

在商城后臺(tái)管理項(xiàng)目中，頁(yè)面布局以及動(dòng)畫特效會(huì)大量使用Element Plus組件庫(kù)，本節(jié)將帶領(lǐng)讀者在項(xiàng)目中引用Element Plus。在瀏覽器中搜索Element Plus中文文檔，在項(xiàng)目終端運(yùn)行下述命令進(jìn)行安裝。

npm install element-plus –save

將Element Plus組件庫(kù)安裝完成后即可在項(xiàng)目中引用，引用方式分為完整引入和按需引入。當(dāng)前項(xiàng)目將演示大多數(shù)Element Plus組件庫(kù)的使用，采用的是完整引入方式。打開main.js入口文件，在入口文件導(dǎo)入Element Plus組件庫(kù)以及樣式，并掛載到app實(shí)例對(duì)象，示例代碼如下。

import { createApp } from 'vue'
import './style.css'
//引入Element Plus
import ElementPlus from 'element-plus'
//引入CSS樣式
import 'element-plus/dist/index.css'
import App from './App.vue'
const app=createApp(App)
//將Element Plus注冊(cè)成全局可用組件庫(kù)
app.use(ElementPlus)
app.mount('#app')

組件庫(kù)引用完成后，即可在任意組件中使用Element Plus，例如，在app.vue入口組件中使用Button按鈕。

打開app.vue入口組件，先將默認(rèn)的代碼清除，然后在template節(jié)點(diǎn)添加按鈕組件，示例代碼如下。

運(yùn)行程序，瀏覽器顯示效果如圖2-4所示。

圖2-4