vite+vue3搭建简易后台管理系统（步骤三：添加Element Plus + 构建主页界面）

打开官网，查看element-plus安装过程

输入 npm install element-plus –save，安装插件，由于安装的Element Plus默认英文，所以此处添加一个文件plugins/element.js用于专门封装element-plus的内容

element.js 代码块

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

export default (app) => {
    app.use(ElementPlus, { locale: zhCn })
}

在mian.js中引用此插件

查看element官方布局容器，将其内容复制至主页，添加main.css(用于配置主页样式)



main.css 代码块

* {
    margin: 0;
    padding: 0;
}
html,
body,
#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.common-layout,
.el-container {
    width: 100%;
    height: 100%;
}
.common-layout .el-header{
    background-color: #c6e2ff;
}
.common-layout .el-aside{
    background-color: #d9ecff;
}
.common-layout .el-main{
    background-color: #ecf5ff;
}
body {
    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
}

运行项目，可以看到element Plus引用成功，主页轮廓也出来了