2.6　全局引用Element Plus

在商城后台管理项目中，页面布局以及动画特效会大量使用Element Plus组件库，本节将带领读者在项目中引用Element Plus。在浏览器中搜索Element Plus中文文档，在项目终端运行下述命令进行安装。

npm install element-plus –save

将Element Plus组件库安装完成后即可在项目中引用，引用方式分为完整引入和按需引入。当前项目将演示大多数Element Plus组件库的使用，采用的是完整引入方式。打开main.js入口文件，在入口文件导入Element Plus组件库以及样式，并挂载到app实例对象，示例代码如下。

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注册成全局可用组件库
app.use(ElementPlus)
app.mount('#app')

组件库引用完成后，即可在任意组件中使用Element Plus，例如，在app.vue入口组件中使用Button按钮。

打开app.vue入口组件，先将默认的代码清除，然后在template节点添加按钮组件，示例代码如下。

运行程序，浏览器显示效果如图2-4所示。

图2-4