Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址

---

---

前言

  今天带来的内容主要是Vue前端架构的搭建，主要包括Vue创建布局以及设置Vue初始化样式、效果展示等。内容都比较简单，都是一些基础工作。下面就开始今天的学习吧！

一、创建布局

1. 我们要做一个类似这样的页面布局样式
   
2. 然后将HomeView.vue中的所有代码替换为以下这段代码，也就是上面的页面布局代码

<template>
    <el-container style="min-height: 100vh">

        
        <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41);">
            <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
                     background-color="rgb(48, 65, 86)"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     :collapse-transition="false"
                     :collapse="isCollapse">
                <div style="height: 60px; line-height: 60px; text-align: center">
                    <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
                    <b style="color: white" v-show="logoTextShow">后台管理系统b>
                div>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-message">i>
                        <span slot="title">导航一span>
                    template>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3el-menu-item>
                    el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4template>
                        <el-menu-item index="1-4-1">选项4-1el-menu-item>
                    el-submenu>
                el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-menu">i>
                        <span slot="title">导航二span>
                    template>
                    <el-submenu index="2-4">
                        <template slot="title">选项4template>
                        <el-menu-item index="2-4-1">选项4-1el-menu-item>
                    el-submenu>
                el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-setting">i>
                        <span slot="title">导航三span>
                    template>
                    <el-submenu index="3-4">
                        <template slot="title">选项4template>
                        <el-menu-item index="3-4-1">选项4-1el-menu-item>
                    el-submenu>
                el-submenu>
            el-menu>
        el-aside>

        <el-container>

            
            <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
                <div style="flex: 1; font-size: 20px">
                    <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse">span>
                div>
                <el-dropdown style="width: 70px; cursor: pointer">
                    <span>IronmanJayspan><i class="el-icon-arrow-down" style="margin-left: 5px">i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息el-dropdown-item>
                        <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出el-dropdown-item>
                    el-dropdown-menu>
                el-dropdown>
            el-header>

            
            <el-main>
                
                <div style="margin-bottom: 30px">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页el-breadcrumb-item>
                        <el-breadcrumb-item>用户管理el-breadcrumb-item>
                    el-breadcrumb>
                div>

                
                <div style="margin: 10px 0">
                    <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search">el-input>
                    <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message"
                              class="ml-5">el-input>
                    <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position"
                              class="ml-5">el-input>
                    <el-button class="ml-5" type="primary">搜索el-button>
                div>

                
                <div style="margin: 10px 0">
                    <el-button type="primary">新增 <i class="el-icon-circle-plus-outline">i>el-button>
                    <el-button type="danger">批量删除 <i class="el-icon-remove-outline">i>el-button>
                    <el-button type="primary">导入 <i class="el-icon-bottom">i>el-button>
                    <el-button type="primary">导出 <i class="el-icon-top">i>el-button>
                div>

                
                <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
                    <el-table-column prop="date" label="日期" width="140">
                    el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    el-table-column>
                    <el-table-column prop="address" label="地址">
                    el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button type="success">编辑 <i class="el-icon-edit">i>el-button>
                            <el-button type="danger">删除 <i class="el-icon-remove-outline">i>el-button>
                        template>
                    el-table-column>
                el-table>

                
                <div style="padding: 10px 0">
                    <el-pagination
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400">
                    el-pagination>
                div>

            el-main>

        el-container>

    el-container>
template>


<script>
    export default {
        name: 'Home',
        data() {
            //初始化数据
            const item = {
                date: '2022-07-12',
                name: 'IronmanJay',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(10).fill(item),
                msg: "IronmanJay",
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false, //默认侧边栏打开
                sideWidth: 200,
                logoTextShow: true, //在默认侧边栏打开的情况下，侧边栏图标显示
                headerBg: 'headerBg'
            }
        },
        methods: {
            collapse() {  //点击收缩侧边栏按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {  //收缩侧边栏
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold'
                    this.logoTextShow = false
                } else {   //展开侧边栏
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold'
                    this.logoTextShow = true
                }
            }
        }
    }
script>


<style>
    .headerBg {
        background: #eee !important;
    }
style>

二、设置样式

1. 首先将App.vue中内容全部替换为如下内容，删除其他无用代码

<template>
    <div id="app">
        <router-view/>
    div>
template>

2. 在项目目录下的src/assets下新建gloable.css作为全局css使用，简单设置一下样式，并设置一些自定义样式，方便后续使用

/**
本css作为全局css样式使用
 */

/*消除页面下方白边，统一格式*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*以下三项为全局的自定义样式，方便调用*/
.ml-5 {
    margin-left: 5px;
}
.mr-5 {
    margin-right: 5px;
}
.pd-10 {
    padding: 10px 0;
}

3. 最终将此css样式在main.js中引入，即可生效。另外设置一下大小，适配屏幕，看起来更舒服
   

三、效果展示

1. 最终效果如下图所示，可以看到我们的前端内容已经完成了，这样我们网站后台的雏形就搭建好了
   

---

总结

  今天我们博文的主要内容就是搭建我们网站后台的基础雏形，因为后面我们要在这个基础上进行功能的完善，所以的学习都是以现在这个网站后台界面为基础的。那么今天的学习就暂时到这里了，下篇博文见！