Vue+ Element Ui 搭建前端專案框架（二）

前言：這些文章算是給自己總結，因為不太熟悉，可能會存在順序上的錯亂。

目錄：

（一）juejin.im/post/5e6c78…

頁面的巢狀結構

用一個普通的頁面巢狀結構來說，普通的後臺一般都是這樣。 我們要做到讓跳轉時讓路由相對應的元件在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>
複製程式碼

效果展示：

待更新：之後再實現動態跳轉/頁面切換