Vue+ Element Ui 搭建前端项目框架（二）前言：这些文章算是给自己总结，因为不太熟悉，可能会存在顺序上的错乱

前言：这些文章算是给自己总结，因为不太熟悉，可能会存在顺序上的错乱。

页面的嵌套结构

用一个普通的页面嵌套结构来说，普通的后台一般都是这样。我们要做到让跳转时让路由相对应的组件在main里面动态展示，保持Header和Aside的不变。

首先：创建一个“壳子”，并且在touter路由中先设置默认展示。

页面上有会有效果的，这里就不截图了。
将Aside和Header部分封装为组件,并在main里引入。（组件里的内容可以自己写/引入后其实是没有样式的，我们需要自己起类名，然后经过样式，达到满意的效果）

scss的封装及引用 —— 题外话（不更换主题色可跳过）：我们可以不仅限于element原有的色彩，可以在element官网上生成自己喜欢的主题色，我这里用到的“#1F66DF”(别问啥蓝问就是随便选哒)，下载后会有一个css文件包，导入到项目并且在项目中使用。

原先的色彩就变成自己设置的了
封装scss文件夹(这个的代码不上传啦，到时候在git里面下载源码吧) index.scss文件导入我们的子文件，然后再在mian.js文件里引入

variables.scss文件：考虑到系统字体和颜色的统一，在这里可以将色彩存为变量，如果产品经理更换字体与颜色的时候，我们可以直接替换

$--color-primary: #1F66DF;
$--color-success: #67c23a;
$--color-warning: #e6a23c;
$--color-danger: #f56c6c;
$--color-info: #909399;
$--color-text-primary: #303133;

base.scss文件也就是我们刚才写嵌套结构的时候可以给我们基础的组件写一点好看的样式（这里拿navbar举例... 其他不一一举例）

有样式之后的效果：我们可以看到样式是生效的，只不过content的高度是由内容撑起来的。

接下来就是动态设置“壳子”/内容的高度（使用到vuex）这里你可以直接在index里面写，为了区分所以我分模块写之后在index里面引入

再设置存取方式
接着在main.vue文件中使用，

    <div class="mia-wrapper">
        <template>
            <MainHeader/>
            <MainAside/>
            <div class="mia-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
                <MainContent/>
            </div>
        </template>
    </div>
    // script部分
            computed:{
            documentClientHeight: {
                get () { return this.$store.state.common.documentClientHeight },
                set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
            }
        },
        mounted () {
            this.resetDocumentClientHeight()
        },
        methods:{
            // 重置窗口可视高度
            resetDocumentClientHeight () {
                this.documentClientHeight = document.documentElement['clientHeight']
                window.onresize = () => {
                    this.documentClientHeight = document.documentElement['clientHeight']
                }
            }
        }

接下来我们再给内容部分给一个高度，为了让他好看一点，在这里使用了element的card组件

<template>
    <main class="mia-content">
        <el-card :body-style="siteContentViewHeight">
            <keep-alive>
                <router-view />
            </keep-alive>
        </el-card>
    </main>
</template>

<script>
    export default {
        name: "main-content",
        computed: {
            documentClientHeight: {
                // 拿到main.vue组件中存起来的可视高度
                get () { return this.$store.state.common.documentClientHeight }
            },
            siteContentViewHeight () {
                // 这里的82是根据自己设置的header组件的css高度计算的
                return { minHeight: this.documentClientHeight - 82 + 'px' }
            }
        },
    }
</script>

效果展示：

待更新：之后再实现动态跳转/页面切换

Vue+ Element Ui 搭建前端项目框架（二）

前言：这些文章算是给自己总结，因为不太熟悉，可能会存在顺序上的错乱。

目录：

页面的嵌套结构