各位朋友好，今天接着来学习vue前端开发。截止昨天咱们只是用vue创建了一个项目，搭建了一个比较简单的后端管理系统页面，那么控制页面主要的展现框架，elmengtplus里是叫continaer布局，而在antdesign里是叫layout，总之就是整体的一个布局展现的东西。
代码语言：javascript复制http://element-plus.org/zh-CN/component/container.html这是地址，大家可以一看。但是有了大致的页面，具体怎么用，昨天还没说到，今天就来一探究竟。
首先说说elmentplus是什么，它就是一款前端的UI框架，是一组预定义的UI组件、就是提前设计好的按钮、表格、下拉框等，界面可以快速实现，开发的时候咱们可以专注业务逻辑。这些ui的东西就不用重复造轮子了，直接拿来用就完事。
为啥说要使用elmentplus，没什么特别的原因，因为很多人使用，很多范例比较普遍。而且这框架人家说是基于Vue3.js开发，这不就正好了。虽然antdesign也有vue社区版本，我个人也比较喜欢antdesign。目前elmentplus官网示例都是ts版本，关于js版本的示例大家就可以自行查找一波，找不到就可以借鉴elmentui的js代码就行，变化也没想象中那么大。
那到底怎么用，直接上手：
1、打开项目根目录，执行命令：
代码语言：javascript复制npm install element-plus –save 安装elmentplus相关的包2、在main.js文件中引入elmentPlus组件库：
代码语言：javascript复制import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')3、然后就可以在你的项目页面模板中，直接使用了，比如弄个按钮进去：
代码语言：javascript复制<template>
<div>
<el-button type="primary">Primary</el-button>
</div>
</template>
4、布局
再看看这个布局是怎么个用法，我这边用的是这种布局
<template>
<div class="common-layout">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
</template>
5、图标
还有这图标怎么用，很简单，就两步，安装加引用，官方查看
代码语言：javascript复制安装npm install @element-plus/icons-vue
引用 import * as ElementPlusIconsVue from
'@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of
Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
6、表格
知道了基础用法，就直接从官网套模版，搭积木一样，很好玩的。这里先介绍这些简单的用法，随着学习深入，在来研究具体的细节。我们先把主要页面搭建起来
今天咱们得基础使用介绍就到这了，后面就开始功能页面的开发，感兴趣的话记得关注呀！
END
