526互联

Vue3 引入 Element Plus

发布时间 2023-09-26 17:26:37作者: 海乐学习

Element Plus简介
Element Plus是一个基于Vue3的UI组件库，其设计原则可分为一致（Consistency）、反馈（Feedback）、效率（Efficiency）、可控（Controllability）四个方面。

目前Element Plus可使用的UI组件种类丰富，除了按钮、边框、icon等基本组件，还可以在项目中引入表单组件、数据展示组件、导航、反馈组件进行使用。
 

在 Vue3 项目中引入 Element Plus

注：由于需要使用包管理器引入Element Plus，在正式引入前先确认本机已经下载好相关的包管理器，才能进行后续步骤。

       比如使用 npm安装 Element Plus，需要先在电脑上完成node.js的安装，再对项目进行Element Plus的安装

在项目中打开终端，输入以下指令（npm）：

npm install element-plus --save

然后就可以在项目中使用Element Plus了。

完整引入

对打包后文件的大小没有限制时，直接使用完整引入更方便。完整引入代码如下：

//以下代码来自Element Plus官网
 
// main.js
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')