element

创建Vue3 项目：

npm create vite@latest my-veu-app

cd my-veu-app

npm install

npm run dev

安装element-plus

npm install element-plus --save

在Vue3项目中main.js 中引入element

import { createApp } from 'vue'
import './style.css'
// 引入ElementPlus Plus
import ElementPlus from 'element-plus'
// 引入css样式
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
// 将Element Plus 注册成全局可用组件库
app.use(ElementPlus)
app.mount('#app')

Container布局容器

参考： https://element-plus.org/zh-CN/component/container.html#header-api

<template>
  <div class="common-layout">
    <el-container>
      <el-header height="300px" >
       头部
      </el-header>
      <el-container>
        <el-aside width="200px"></el-aside>
        <el-main>Main</el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>
<style scoped>
.el-header{
    background:pink;
}
.el-aside{
  background:blue;
}
.el-main{
  background:yellow;
}
.el-footer{
  background:red;
}
</style>

Layout 布局：

ICON图标：

Button图标：

Link链接：

表单元素：