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

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

  今天带来的内容主要是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">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-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">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-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">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-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>IronmanJay</span><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>

<!--页面数据与动作Js代码-->
<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中内容全部替换为如下内容，删除其他无用代码

<!--app组件-->
<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. 最终效果如下图所示，可以看到我们的前端内容已经完成了，这样我们网站后台的雏形就搭建好了
   

---

总结

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