SRE前端之elementplus篇

各位朋友好，今天接着来学习vue前端开发。截止昨天咱们只是用vue创建了一个项目，搭建了一个比较简单的后端管理系统页面，那么控制页面主要的展现框架，elmengtplus里是叫continaer布局，而在antdesign里是叫layout，总之就是整体的一个布局展现的东西。

这是地址，大家可以一看。但是有了大致的页面，具体怎么用，昨天还没说到，今天就来一探究竟。

首先说说elmentplus是什么，它就是一款前端的UI框架，是一组预定义的UI组件、就是提前设计好的按钮、表格、下拉框等，界面可以快速实现，开发的时候咱们可以专注业务逻辑。这些ui的东西就不用重复造轮子了，直接拿来用就完事。

为啥说要使用elmentplus，没什么特别的原因，因为很多人使用，很多范例比较普遍。而且这框架人家说是基于Vue3.js开发，这不就正好了。虽然antdesign也有vue社区版本，我个人也比较喜欢antdesign。目前elmentplus官网示例都是ts版本，关于js版本的示例大家就可以自行查找一波，找不到就可以借鉴elmentui的js代码就行，变化也没想象中那么大。

那到底怎么用，直接上手：

1、打开项目根目录，执行命令：

2、在main.js文件中引入elmentPlus组件库：

3、然后就可以在你的项目页面模板中，直接使用了，比如弄个按钮进去：

4、布局

再看看这个布局是怎么个用法，我这边用的是这种布局

如同我框起来的，主要就是aside、hed、main、footer四部分。然后你可以将四部分拆为四个单独的组件，有利于后期扩展、重构等，我这边就直接一堆放一起，构成一个页面，代码内容稍长，就不摆在这里了，感兴趣的加入我的知识星球（限免）或后台私信索取即可。

5、图标

还有这图标怎么用，很简单，就两步，安装加引用，官方查看

6、表格

知道了基础用法，就直接从官网套模版，搭积木一样，很好玩的。这里先介绍这些简单的用法，随着学习深入，在来研究具体的细节。我们先把主要页面搭建起来

今天咱们得基础使用介绍就到这了，后面就开始功能页面的开发，感兴趣的话记得关注呀！

END