### **一般引入三方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) ~~~ * 这就结束了按需引入