前端学习笔记 4：Element Plus

前端学习笔记 4：Element Plus

1.准备工作

在使用 Element Plus 之前，需要先创建一个 Vue 工程，具体可以参考上一篇文章。

创建好后就可以按照官方文档中的指示，在工程目录下安装 Element 依赖：

npm install element-plus --save

注意，Element 和 Element Plus 是两个不同的项目，前者适用于 Vue 2.X，后者适用于 Vue 3.X。这里使用的是后者。

2.快速开始

按照官方文档的指引，修改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')

这里的import ElementPlus from 'element-plus'导入了 Element Plus 模块，import 'element-plus/dist/index.css'导入了相关的样式。

完整引入后就可以在 vue 文件中使用 ElementPlus 的组件了，比如修改App.vue：

3.常用组件

3.1.表格

关于表格组件的详细说明可以观看这个视频。

3.2.分页条

关于分页条的详细说明可以观看这个视频。

3.3.表单

关于表单的详细说明可以观看这个视频。

3.4.卡片

关于卡片的详细说明可以观看这个视频。

谢谢阅读，本文的完整示例代码见这里。

4.参考资料

• 黑马程序员SpringBoot3+Vue3全套视频教程
• 一个 Vue 3 UI 框架 | Element Plus (element-plus.org)