Vue3项目中快速引入ElementUI框架

ElementUI介绍

       ElementUI是一个强大的PC端UI组件框架，它不依赖于vue，但是却是当前和vue配合做项目开发的一个比较好的ui框架，其包含了布局（layout)，容器（container）等各类组件，基本上能满足日常网站的搭建开发。针对vue2和vue3都有对应的组件版本，本文主要介绍在vue3中如何引入使用ElementUI（vue3中升级为Element Plus)。

安装

vue3中使用如下命令通过 npm 安装 （我也使用的安装方式）

$ npm install element-plus --save

也可以使用其他的包管理起进行安装：

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

引入

      element-plus分为全局引入和按需引入两种方式，一般在工程项目中，由于全局引入会导致不必要的资源加载，为提升项目性能，建议进行按需引入。以下我们对两种引入方式进行介绍。

全局引入

       全局引入就是在项目入口（main.ts/main.js）文件直接引入组件以及组件全部的样式文件；代码如下所示：

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需引入

      在vue3中按需引入ElementUI，需要使用其他的插件辅助，需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件；安装方法如下：

npm install -D unplugin-vue-components