### **一般引入三方UI有兩種方式** > 1 全局引入 寫起來舒服 但是包比較大 2 按需引入 寫起來不舒服 但是包相對全局比較小 #### **1.全局引入** 執行命令 `npm install element-plus --save` 引入element-plus 在vue框架的main.js/ts中 放置下面代碼 ~~~ import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' ~~~ * 這就結束了 在項目中就可以全局使用了 #### **2.按需引入** 創建文件 文件名和文件夾隨意起  在register-element.ts中 寫入下面代碼 ~~~ import { App } from 'vue' import 'element-plus/lib/theme-chalk/base.css' //導入使用的組件 import { ElAside, ElAvatar, ElButton } from 'element-plus' //將組件 放到定義變量 循環放置注冊 讓開發者使用組件 const components = [ ElAside, ElAvatar, ElButton ] export default function (app: App): void { for (const component of components) { app.component(component.name, component) } } ~~~ 在index.ts中 寫入下面代碼 ~~~ import { App } from 'vue' import registerElement from './register-element' export function globalRegister(app: App): void { app.use(registerElement) } ~~~ 掛載 引入 我上面創建的index.js并且掛載到 app中 ~~~ import { globalRegister } from './global' app.use(globalRegister) ~~~ * 這就結束了按需引入