目录

一、项目介绍

二、项目结构

1.vscode的项目截图

2.项目依赖

三、项目截图

1.登录页

2.首页

3.汽车管理

4.汽车信息

5.系统管理

6.订单管理

7.数据统计

8.个人中心 

四、源码分析

1.数据存储与同步

2.汽车信息

3.框架布局

五、总结


一、项目介绍

项目使用vue3+vite+element-plus+pinia+router+axios等搭建,每个页面已经完成了对后端api请求的编码,各种交互已经写好,同时通过pinia实现数据同步与通讯,在此基础上实现页面历史导航栏功能,增加了支持多层级顶级菜单联动左侧菜单,左侧菜单由顶部菜单控制,导航栏实现对顶级菜单和左侧菜单的样式同步。

其中菜单可支持动态配置,菜单icon也支持组件化动态配置,这大大提高了框架的灵活度和便捷性。

项目同时采用组件来布局整个框架,左侧+顶部+导航栏+具体页面功能展示容器。

element-plus官方文档:

 Overview 组件总览 | Element Plus

二、项目结构

1.vscode的项目截图

vue3+element-plus+pinia完整搭建好看简洁的管理后台_导航栏

2.项目依赖

vue3+element-plus+pinia完整搭建好看简洁的管理后台_导航栏_02

三、项目截图

1.登录页

输入账密登录,登录成功,跳转首页。

vue3+element-plus+pinia完整搭建好看简洁的管理后台_vue.js_03

2.首页

首页的导航栏是默认的,不可取消。

vue3+element-plus+pinia完整搭建好看简洁的管理后台_导航栏_04

3.汽车管理

选择顶部菜单,左侧菜单对应展示,同时历史导航栏增加当前页面。

vue3+element-plus+pinia完整搭建好看简洁的管理后台_javascript_05

4.汽车信息

各种脚本校验都通过vue3实现,文件上传等,其他页面类似

vue3+element-plus+pinia完整搭建好看简洁的管理后台_前端_06

5.系统管理

系统管理主要作为管理员日常使用的功能,可归纳在此。

vue3+element-plus+pinia完整搭建好看简洁的管理后台_前端_07

vue3+element-plus+pinia完整搭建好看简洁的管理后台_导航栏_08

6.订单管理

 订单管理可作为一个主要的功能模块,可单独分离出来,方便管理。

vue3+element-plus+pinia完整搭建好看简洁的管理后台_前端_09

7.数据统计

 数据统计,一般管理系统都会有此类似模块,可单独归为一个菜单专门管理。

vue3+element-plus+pinia完整搭建好看简洁的管理后台_ico_10

8.个人中心 

可进行个人信息修改和密码修改。

四、源码分析

1.数据存储与同步

主要包含用户登录信息和历史导航栏等数据的存储与同步。历史导航栏的增删改查都有对应的方法,用户登录后,信息也会暂寄存于此,即变量:nowUser

vue3+element-plus+pinia完整搭建好看简洁的管理后台_导航栏_11

vue3+element-plus+pinia完整搭建好看简洁的管理后台_javascript_12

import {defineStore} from 'pinia'
import {CarStatus} from "@/type/dataDefinition";
// @ts-ignore
import {diff} from '@/util/util'

export const useStore = defineStore('main', () => {
  const chosenCarType = ref({
    nowCarType: "",
    nowCarTypeId: "",
  });
  const chosenCar = ref({
    id: "",
    carConfigs: [],
  });
  const lastPage = ref(1);
  const firstPage = ref("/home");
  const nowUser = reactive({form: {} as any} as any);
  const search = reactive({form: {} as any} as any);
  const tagSet = reactive({form: {tagList:[], tag:{label:"首页",value:"/home"}} as any } as any);
  const subMenu = reactive({form: [] as any} as any);

  const getLastPage = () => {
    return lastPage.value;
  };
  const setLastPage = (item: number) => {
    lastPage.value = item;
  };

  const addTag = (tag: any) => {
    if(tag.value === '/'){
      tag.value = "/home";
      tag.label = "首页";
    }
    if(tagSet.form.tagList.length === 0){
      tagSet.form.tagList.push(
          {label:"首页",value:"/home"}
      );
    }
    tagSet.form.tag = tag;
    if (tagSet.form.tagList.some((ele:any)  => diff(ele, tag))) return;
    let saveTag = {};
    Object.assign(saveTag, tag);
    tagSet.form.tagList.push(saveTag);
  };

  const delTag = (tag:any)=>{
    tagSet.form.tagList = tagSet.form.tagList.filter((item:any) => {
      return !diff(item, tag) || item.value === firstPage.value;
    });
  };
  const delOtherTag = ()=>{
    tagSet.form.tagList = tagSet.form.tagList.filter((item:any) => {
      if (item.value === tagSet.form.tag.value) {
        return true;
      } else if (item.value === firstPage.value) {
        return true;
      }
    });
  };
  const delAllTag = ()=>{
    tagSet.form.tagList = tagSet.form.tagList.filter((item:any) => {
      if (item.value === firstPage.value) {
        return true;
      }
    });
  };
  const clearTag = ()=>{
    tagSet.form.tagList = [];
  };
  return {chosenCarType, chosenCar, lastPage,firstPage, subMenu, getLastPage, setLastPage, nowUser, search,tagSet,addTag,delTag,delOtherTag,delAllTag,clearTag};
}, {
  persist: true,
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
2.汽车信息
<template>
  <div class="contain-box">
    <div style="margin: 20px 35px;display: inline-block;">
      <el-select v-model="searchForm.carTypeId" placeholder="请选择汽车类型" style="margin-left: 15px" clearable>
        <el-option v-for="item in carTypeList" :key="item.id" :label="item.type" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchForm.carNameId" placeholder="请选择汽车品牌" style="margin-left: 15px" clearable>
        <el-option v-for="item in carNameList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-input
          style="width: 200px; margin-left: 15px"
          :suffix-icon="CollectionTag"
          placeholder="请输入具体名称"
          v-model="searchForm.carSpecificName"
      ></el-input>
      <el-input
          style="width: 200px; margin-left: 15px"
          :suffix-icon="TakeawayBox"
          placeholder="请输入标志"
          v-model="searchForm.carTag"
      ></el-input>
      <el-input
          style="width: 200px; margin-left: 15px"
          :suffix-icon="CreditCard"
          placeholder="请输入车牌"
          v-model="searchForm.licensePlate"
      ></el-input>
      <el-select v-model="searchForm.rented" placeholder="请选择租用情况" style="margin-left: 15px" clearable>
        <el-option label="已租用" value="true"></el-option>
        <el-option label="未被租用" value="false"></el-option>
      </el-select>
      <el-select v-model="searchForm.statusLabel" placeholder="请选择汽车状态" style="margin-left: 15px" clearable>
        <el-option label="正常" value="Normal"></el-option>
        <el-option label="维修中" value="Maintenance"></el-option>
        <el-option label="年检中" value="Annual_Inspection"></el-option>
      </el-select>
      <div style="margin-left: 20px;margin-top: 10px;">
        <el-button type="primary" @click="search">搜索<el-icon class="el-icon--right"><Search /></el-icon></el-button>
        <el-button type="warning" @click="reset">重置<el-icon class="el-icon--right"><Refresh /></el-icon></el-button>
      </div>
    </div>
    <div style="margin: 10px 20px">
      <el-button type="primary" @click="preInsert"
      >新增<el-icon class="el-icon--right"><CirclePlus /></el-icon></el-button>
      <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon-color="red"
          title="是否确定删除?"
          @confirm="del(hasSelected)"
      >
        <template #reference>
          <el-button type="danger" slot="reference" style="margin-left: 10px"
          >批量删除<el-icon class="el-icon--right"><DocumentDelete /></el-icon></el-button>
        </template>
      </el-popconfirm>
      <el-button type="primary" @click="exp"
      >下载<el-icon class="el-icon--right"><Download /></el-icon></el-button>
    </div>
    <div style="margin: 20px">
      <el-table :data="tableData"
                stripe
                border
                @selection-change="handleSelectionChange"
                :header-cell-style="{backgroundColor: 'aliceblue', fontSize: '16px', color: 'grey'}"
                @expand-change="getCarConfigList"
                row-key="id"
                :expand-row-keys="expands"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="expand">
          <template #default="scope">
            <div>
              <div style="margin: 0 300px">
                <el-tag
                    class="mx-1"
                    :key="item"
                    v-for="item in scope.row.carConfigs"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(scope.row.carConfigs, item)"
                    style="margin: 10px 50px" type="warning"
                >
                  {{item.detail}}
                </el-tag>
                <el-input
                    v-if="inputVisible"
                    ref="InputRef"
                    v-model="inputValue"
                    class="ml-1 w-20"
                    size="small"
                    @keyup.enter="handleInputConfirm(scope.row.carConfigs)"
                    @blur="handleInputConfirm(scope.row.carConfigs)"
                    style="width: 115px"
                />
                <el-button v-else size="small" @click="showInput" style="width: 115px">
                  添加一个汽车配置
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="图片" width="100">
          <template #default="scope">
            <el-image
                    :preview-src-list="(scope.row.url?scope.row.url.split(','):[])"
                :src="scope.row.url"
                style="width: 80px; height: 80px; margin: 5px; cursor: pointer"
                alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="carType" label="类型" width="150" />
        <el-table-column prop="carName" label="品牌" width="150" />
        <el-table-column prop="carSpecificName" label="具体名称" width="150" />
        <el-table-column prop="carTag" label="标志" width="120" />
        <el-table-column prop="licensePlate" label="车牌" width="120" />
        <el-table-column prop="dailyRent" label="日租金/元" width="120" />
        <el-table-column prop="rented" label="租用" width="80" >
          <template #default="scope">
            <el-switch v-model="scope.row.rented" disabled/>
          </template>
        </el-table-column>
        <el-table-column prop="statusLabel" label="状态" width="80" />
        <el-table-column prop="createBy" label="创建人" width="80" />
        <el-table-column prop="createTime" label="创建时间" width="180" :formatter="dateFormat" />
        <el-table-column prop="operation" label="操作" width="180">
          <template #default="scope">
            <el-button type="text" @click="preEdit(scope.row)"
            >编辑<el-icon class="el-icon--right"><Edit /></el-icon></el-button>
            <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon-color="red"
                title="是否确定删除?"
                @confirm="del([scope.row])"
            >
              <template #reference>
                <el-button
                    type="text"
                    style="margin-left: 10px;color: red;"
                >删除<el-icon class="el-icon--right"><Delete /></el-icon></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block" style="margin: 5px 35px; float: right">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
        title="车辆信息"
        v-model="dialogVisible"
        width="30%"
        top="50px"
    >
      <el-upload
          class="avatar-uploader"
          action="http://localhost:8090/image/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          style="margin: 20px 150px"
      >
        <img v-if="newOrEditForm.form.url" :src="newOrEditForm.form.url" class="avatar" alt="" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <el-form :rules="rules" :model="newOrEditForm.form" label-width="100px" ref="ruleFormRef">
        <el-form-item label="类型" prop="carTypeId">
          <el-select v-model="newOrEditForm.form.carTypeId" placeholder="请选择汽车类型" clearable>
            <el-option v-for="item in carTypeList" :key="item.id" :label="item.type" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" prop="carNameId">
          <el-select v-model="newOrEditForm.form.carNameId" placeholder="请选择汽车品牌" clearable>
            <el-option v-for="item in carNameList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日租金/元" prop="dailyRent">
          <el-input
              style="width: 300px; margin: 3px 0"
              v-model="newOrEditForm.form.dailyRent"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="具体名称" prop="carSpecificName">
          <el-input
              style="width: 300px; margin: 3px 0"
              v-model="newOrEditForm.form.carSpecificName"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="标志" prop="catTag">
          <el-input
              style="width: 300px; margin: 3px 0"
              v-model="newOrEditForm.form.carTag"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="车牌" prop="licensePlate">
          <el-input
              style="width: 300px; margin: 3px 0"
              v-model="newOrEditForm.form.licensePlate"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否租用" prop="rented">
          <el-select v-model="newOrEditForm.form.rented" placeholder="请选择租用情况" clearable disabled>
            <el-option label="已租用" :value="true"></el-option>
            <el-option label="未被租用" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="汽车状态" prop="status">
          <el-select v-model="newOrEditForm.form.status" placeholder="请选择汽车状态" clearable disabled>
            <el-option label="正常" value="Normal"></el-option>
            <el-option label="维修中" value="Maintenance"></el-option>
            <el-option label="年检中" value="Annual_Inspection"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogCancel">取 消</el-button>
          <el-button type="primary" @click="submitNewOrEdit(ruleFormRef)">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {CirclePlus, Delete, DocumentDelete, Download, Edit, Refresh, Search, CreditCard, CollectionTag, TakeawayBox, Plus} from "@element-plus/icons";
import request from "@/request/request";
import moment from "moment";
import type {FormInstance, FormRules, UploadProps} from 'element-plus';
import {ElInput, ElMessage} from "element-plus";
import {CarStatus} from "@/type/dataDefinition";

const searchItem = () => ({
  carTypeId: "",
  carNameId: "",
  carSpecificName: "",
  carTag: "",
  licensePlate: "",
  rented: "",
  status: CarStatus.Wrong,
  statusLabel: "",
})

const newOrEditItem = () => ({
  form: {
    carTypeId: "",
    carNameId: "",
    imageId: "",
    dailyRent: "",
    carSpecificName: "",
    carTag: "",
    licensePlate: "",
    rented: false,
    status: "",
    statusLabel: "",
    url: "",
  }
})

const rules = reactive<FormRules>({
  carTypeId: [
    {
      required: true,
      message: '请选择类型',
      trigger: 'change',
    },
  ],
  carNameId: [
    {
      required: true,
      message: '请选择品牌',
      trigger: 'change',
    },
  ],
  dailyRent: [
    {
      required: true,
      message: '请输入日租金',
      trigger: 'change',
    },
  ],
  carSpecificName: [
    {
      required: true,
      message: '请输入具体名称',
      trigger: 'change',
    },
  ],
  licensePlate: [
    {
      required: true,
      message: '请输入车牌',
      trigger: 'change',
    },
  ],
})

const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
const searchForm = reactive(searchItem());
const newOrEditForm = reactive(newOrEditItem());
const isEdit = ref(false);
const hasSelected = ref([]);
const carTypeList = ref([]);
const carNameList = ref([]);
const expands = ref([] as any);
const inputValue = ref('');
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

//  表格切换每页展示数据数
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  getData();
}

//  表格切换到第几页
const handleCurrentChange = (current: number) => {
  currentPage.value = current;
  getData();
}

//  时间格式化
const dateFormat = (e: any) => {
  return moment(e.createTime).format("YYYY-MM-DD HH:mm:ss");
}

//  控制添加汽车配置的按钮与输入框转换
const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

//  汽车配置的添加
const handleInputConfirm = (carConfigs: any) => {
  if (inputValue.value) {
    let insertConfigForm = {
      carId: expands.value[0],
      detail: inputValue.value,
    };
    request.post("/carConfig/insertOne", insertConfigForm).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success("添加汽车配置成功");
        carConfigs.push(res.data);
      } else {
        ElMessage.error(res.msg);
      }
      inputVisible.value = false
      inputValue.value = ""
    });
  }
  inputVisible.value = false
  inputValue.value = ""
}

//  汽车配置的删除
const handleClose = (carConfigs: any, item: any) => {
  request.post("/carConfig/deleteOne", item).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success("删除汽车配置成功");
      carConfigs.splice(carConfigs.indexOf(item), 1)
    } else {
      ElMessage.error(res.msg);
    }
  });
}

//  获取单个汽车的配置信息,且每次只能打开一项
const getCarConfigList = (row: any) => {
  if (row.id === expands.value[0]) {
    expands.value = [];
    return;
  }

  expands.value = [];
  expands.value.push(row.id);
  if (!row.carConfigs) {
    request.get("/carConfig/getCarConfigList", {
      params: {
        carId: row.id
      }
    }).then((res: any) => {
      if (res.code === 200) {
        row.carConfigs = res.data
      } else {
        ElMessage.error(res.msg);
      }
    })
  }
}

//  图片上传成功后赋值
const handleAvatarSuccess: UploadProps['onSuccess'] = (res, row) => {
  if (res.code === 200) {
    newOrEditForm.form.url = res.data.url;
    newOrEditForm.form.imageId = res.data.id;
  } else {
    ElMessage.error(res.msg);
  }
}

//  图片上传条件
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  let types = ["image/jpg", "image/jpeg", "image/png"];
  if (!types.includes(rawFile.type)) {
    ElMessage.error("上传头像图片只能是 JPG 格式或 PNG 格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("上传头像图片大小不能超过 10MB!");
    return false;
  }
  return true;
}

//  条件搜索
const search = () => {
  searchForm.status = searchForm.statusLabel as CarStatus;
  if (searchForm.statusLabel === "") {
    searchForm.status = CarStatus.Wrong;
  }
  getData();
}

//  重置条件
const reset = () => {
  Object.assign(searchForm, searchItem());
  getData();
}



//  新建前
const preInsert = () => {
  isEdit.value = false;
  Object.assign(newOrEditForm, newOrEditItem());
  newOrEditForm.form.rented = false;
  newOrEditForm.form.status = "Normal";
  dialogVisible.value = true;
}

  //  清空表
  const clearForm = (formEl: FormInstance | undefined) => {
    if (!formEl) {
      return;
    }
    formEl.resetFields();
  }

//  编辑前
const preEdit = (row: any) => {
  isEdit.value = true;
  newOrEditForm.form = JSON.parse(JSON.stringify(row));
  dialogVisible.value = true;
}

//  提交表单
  const submitNewOrEdit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        if (isEdit.value) {
          request.post("/car/chgCar", newOrEditForm.form).then((res: any) => {
            if (res.code === 200) {
              ElMessage.success("修改成功");
              dialogCancel();
            } else {
              ElMessage.error(res.msg);
            }
            getData();
          });
        } else {
          request.post("/car/insertOne", newOrEditForm.form).then((res: any) => {
            if (res.code === 200) {
              ElMessage.success("添加成功");
              dialogCancel();
            } else {
              ElMessage.error(res.msg);
            }
            getData();
          });
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }

//  关闭新建或编辑弹窗
const dialogCancel = () => {
  clearForm(ruleFormRef.value);
  dialogVisible.value = false;
}

//  删除
const del = (ids: []) => {
  ids = ids.filter((e: any) => {
    // @ts-ignore
    return e.rented === false && CarStatus[e.status] === CarStatus.Normal
  }) as [];
  if (ids.length === 0) {
    ElMessage.error("未有空闲车辆");
    return;
  }
  ids = ids.map((e: any) => {
    return e.id;
  }) as [];

  request.post("/car/delMore", ids).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success("删除空闲车辆成功");
    } else {
      ElMessage.error(res.msg);
    }
    dialogCancel();
    getData();
  });
}

//  多选
const handleSelectionChange = (row: any) => {
  hasSelected.value = row;
}

//  获取carType 所有汽车类型列表
const getCarTypeList = () => {
  request.get("/carType/getCarTypeList").then((res: any) => {
    if (res.code === 200) {
      carTypeList.value = res.data;
    } else {
      ElMessage.error("汽车类型获取失败,请联系管理员!");
    }
  })
}
getCarTypeList();

//  获取carName 所有汽车品牌列表
const getCarNameList = () => {
  request.get("/carName/getCarNameList").then((res: any) => {
    if (res.code === 200) {
      carNameList.value = res.data;
    } else {
      ElMessage.error("汽车品牌获取失败,请联系管理员!");
    }
  })
}
getCarNameList();

//  获取数据
const getData = () =>  {
  request.get("/car/getPages", {
    params: {
      ...searchForm,
      current: currentPage.value,
      size: pageSize.value
    }
  }).then((res: any) => {
    if (res.code === 200) {
      tableData.value = res.data.page?.records;
      total.value = res.data.page?.total;
      tableData.value.forEach((e: any) => {
        // @ts-ignore
        e.statusLabel = CarStatus[e.status];
      });
    } else {
      ElMessage.error(res.msg);
    }
  })
}
getData();
</script>

<style>
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 243.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251.
  • 252.
  • 253.
  • 254.
  • 255.
  • 256.
  • 257.
  • 258.
  • 259.
  • 260.
  • 261.
  • 262.
  • 263.
  • 264.
  • 265.
  • 266.
  • 267.
  • 268.
  • 269.
  • 270.
  • 271.
  • 272.
  • 273.
  • 274.
  • 275.
  • 276.
  • 277.
  • 278.
  • 279.
  • 280.
  • 281.
  • 282.
  • 283.
  • 284.
  • 285.
  • 286.
  • 287.
  • 288.
  • 289.
  • 290.
  • 291.
  • 292.
  • 293.
  • 294.
  • 295.
  • 296.
  • 297.
  • 298.
  • 299.
  • 300.
  • 301.
  • 302.
  • 303.
  • 304.
  • 305.
  • 306.
  • 307.
  • 308.
  • 309.
  • 310.
  • 311.
  • 312.
  • 313.
  • 314.
  • 315.
  • 316.
  • 317.
  • 318.
  • 319.
  • 320.
  • 321.
  • 322.
  • 323.
  • 324.
  • 325.
  • 326.
  • 327.
  • 328.
  • 329.
  • 330.
  • 331.
  • 332.
  • 333.
  • 334.
  • 335.
  • 336.
  • 337.
  • 338.
  • 339.
  • 340.
  • 341.
  • 342.
  • 343.
  • 344.
  • 345.
  • 346.
  • 347.
  • 348.
  • 349.
  • 350.
  • 351.
  • 352.
  • 353.
  • 354.
  • 355.
  • 356.
  • 357.
  • 358.
  • 359.
  • 360.
  • 361.
  • 362.
  • 363.
  • 364.
  • 365.
  • 366.
  • 367.
  • 368.
  • 369.
  • 370.
  • 371.
  • 372.
  • 373.
  • 374.
  • 375.
  • 376.
  • 377.
  • 378.
  • 379.
  • 380.
  • 381.
  • 382.
  • 383.
  • 384.
  • 385.
  • 386.
  • 387.
  • 388.
  • 389.
  • 390.
  • 391.
  • 392.
  • 393.
  • 394.
  • 395.
  • 396.
  • 397.
  • 398.
  • 399.
  • 400.
  • 401.
  • 402.
  • 403.
  • 404.
  • 405.
  • 406.
  • 407.
  • 408.
  • 409.
  • 410.
  • 411.
  • 412.
  • 413.
  • 414.
  • 415.
  • 416.
  • 417.
  • 418.
  • 419.
  • 420.
  • 421.
  • 422.
  • 423.
  • 424.
  • 425.
  • 426.
  • 427.
  • 428.
  • 429.
  • 430.
  • 431.
  • 432.
  • 433.
  • 434.
  • 435.
  • 436.
  • 437.
  • 438.
  • 439.
  • 440.
  • 441.
  • 442.
  • 443.
  • 444.
  • 445.
  • 446.
  • 447.
  • 448.
  • 449.
  • 450.
  • 451.
  • 452.
  • 453.
  • 454.
  • 455.
  • 456.
  • 457.
  • 458.
  • 459.
  • 460.
  • 461.
  • 462.
  • 463.
  • 464.
  • 465.
  • 466.
  • 467.
  • 468.
  • 469.
  • 470.
  • 471.
  • 472.
  • 473.
  • 474.
  • 475.
  • 476.
  • 477.
  • 478.
  • 479.
  • 480.
  • 481.
  • 482.
  • 483.
  • 484.
  • 485.
  • 486.
  • 487.
  • 488.
  • 489.
  • 490.
  • 491.
  • 492.
  • 493.
  • 494.
  • 495.
  • 496.
  • 497.
  • 498.
  • 499.
  • 500.
  • 501.
  • 502.
  • 503.
  • 504.
  • 505.
  • 506.
  • 507.
  • 508.
  • 509.
  • 510.
  • 511.
  • 512.
  • 513.
  • 514.
  • 515.
  • 516.
  • 517.
  • 518.
  • 519.
  • 520.
  • 521.
  • 522.
  • 523.
  • 524.
  • 525.
  • 526.
  • 527.
  • 528.
  • 529.
  • 530.
  • 531.
  • 532.
  • 533.
  • 534.
  • 535.
  • 536.
  • 537.
  • 538.
  • 539.
  • 540.
  • 541.
  • 542.
  • 543.
  • 544.
  • 545.
  • 546.
  • 547.
  • 548.
  • 549.
  • 550.
  • 551.
  • 552.
  • 553.
  • 554.
  • 555.
  • 556.
  • 557.
  • 558.
  • 559.
  • 560.
  • 561.
  • 562.
  • 563.
  • 564.
  • 565.
  • 566.
  • 567.
  • 568.
  • 569.
  • 570.
  • 571.
  • 572.
  • 573.
  • 574.
  • 575.
  • 576.
  • 577.
  • 578.
  • 579.
  • 580.
  • 581.
  • 582.
  • 583.
  • 584.
  • 585.
  • 586.
  • 587.
  • 588.
  • 589.
  • 590.
  • 591.
  • 592.
  • 593.
  • 594.
  • 595.
  • 596.
  • 597.
  • 598.
  • 599.
  • 600.
  • 601.
  • 602.
  • 603.
  • 604.
  • 605.
  • 606.
  • 607.
  • 608.
  • 609.
  • 610.
  • 611.
  • 612.
  • 613.
  • 614.
  • 615.
  • 616.
  • 617.
  • 618.
  • 619.
  • 620.
  • 621.
  • 622.
  • 623.
  • 624.
  • 625.
  • 626.
  • 627.
  • 628.
  • 629.
  • 630.
  • 631.
3.框架布局

vue3+element-plus+pinia完整搭建好看简洁的管理后台_导航栏_13

<template>
  <div style="width: 100%;height: 100%;overflow: hidden;display: flex;">
    <ManagementAside :isCollapse="isCollapse"></ManagementAside>
    <div :style="'width: calc(100% - '+(isCollapse?'65px':'200px')+');background-color: #f0f2f5;'">
      <ManagerHeader @changeIsCollapse="changeIsCollapse" />
      <tags/>
      <!-- 页面展示容器 -->
      <router-view class="vue-view" style="height: calc(100% - 112px);"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import ManagementAside from "../../components/manager/ManagerAside.vue";
import ManagerHeader from "@/components/manager/ManagerHeader.vue";
import Tags from "@/components/manager/tags.vue";

const isCollapse = ref(false);

const changeIsCollapse = (v: any) => {
  isCollapse.value = v;
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
  border-bottom: 1px solid grey;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
  .managerStruct{
    width: 100%;
    min-height: 100%;
  }
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.

五、总结

项目页面完整,后续可能将不断升级,完善其他页面。

关注作者,及时了解更多好项目!