技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-3.使用flex布局并開始搭建web端

1.用sass工具定義flex布局樣式

flex 屬性用于設定或檢索彈性盒模型對象的子元素如何配置設定空間。

其中
justify-content(水準方向對齊)屬性和 align-content(垂直方向對齊)屬性更友善地解決元素的對其、分布方式

技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-3.使用flex布局并開始搭建web端

技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-3.使用flex布局并開始搭建web端
具體在什麼場景如何得到效果大家去連結中測試。

sass工具定義：

// flex布局
.d-flex{
    display: flex;
}
$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
);
@each $key,$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}
$flex-ac: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
);
@each $key,$value in $flex-ac {
    .ac-#{$key} {
        align-content: $value;
    }
}

技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-3.使用flex布局并開始搭建web端

另外，如果遇到需要讓幾個靈活項目橫、縱向排列，可以用到flex-derection:

.flex-column{
    // 靈活的項目将垂直顯示，正如一個列一樣。
    flex-direction: column;
}

2.利用sass生成的css搭建web端

（1）添加web端路由

具體路由操作見admin路由設定

與admin端相同，直接給web端添加路由：

cd web 
vue add router

選擇no，使用普通路由

安裝完成後，web端檔案自動配置，同時頁面出現了路由：

我們不在所有頁面使用固定路由，是以删掉vue預設設定的路由。

建立主入口頁面Main.vue，将Main元件當作首頁面，把Home.vue視為首頁元件，通過路由将Home.vue作為子元件引入到Main.vue：

待頁面樣式完善後，添加其他頁面路由。

（2）使用sass生成的css優化界面

給我們需要添加效果的子產品直接添加類名即可。

我的頁面，其中首頁為Home.vue，技能學習為Skill.vue，文章中心為Article.vue：

Main.vue

<template>
    <div>
        <div class="topbar py-2 px-3 d-flex ac-center">
            <img src="../assets/logo.png" height="50">
            <div class="px-2 flex-1">
                <div class="text-black fs-lg pt-2">八方設計</div>
                <div class="text-gray fs-xxs pt-2">用設計挖掘夢想</div>
            </div>
            <div class="py-3">
                <button class="btn bg-primary text-white">使用者登入</button>
            </div>
        </div>
        <div class="bg-primary pt-3 pb-2">
            <div class="nav d-flex text-white jc-around">
                <div class="nav-item">
                    <!-- 導航使用路由的active-class，根據所在路由位置為标簽添加類名，同時在style.scss中設定active類名的樣式 -->
                    <!-- extra屬性與active-class配合使用,更精确找到路由位置,若不加則會認為/skill在/内(即技能學習在首頁内部),二者都會被賦予active類名 -->
                    <router-link class="nav-link" tag="div" to="/" active-class="active" exact>首頁</router-link>
                </div>
                <div class="nav-item">
                    <router-link class="nav-link" tag="div" to="/skill" active-class="active" exact>技能學習</router-link>
                </div>
                <div class="nav-item">
                    <router-link class="nav-link" tag="div" to="/article" active-class="active" exact>文章中心</router-link>
                </div>
            </div>
        </div>

        <!-- 路由元件 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>
    .fs-xxs{
        letter-spacing: 3px;
    }
    .fs-lg{
        letter-spacing: 3px;
    }
    .topbar{
        /* 吸頂效果 */
        position: sticky;
        top: 0;
        z-index: 999;
    }
</style>

style.scss

// 規範樣式

* {
    // 避免margin/padding等将頁面向外擴充，加入border-box後頁面像内部擠壓
    box-sizing: border-box;
    // 取消滑鼠移入等高亮樣式
    outline: none;
}

html {
    // 設定預設字型大小
    font-size: 13px;
}

body {
    // 設定body預設

    // 去除body邊框
    margin: 0;
    // 設定字型：所有計算機自帶字型，蘋果電腦自帶字型，非襯線字型
    font-family: Arial, Helvetica, sans-serif;
    // 行距
    line-height: 1.2rem;
    // 背景顔色
    background: #f5f5f5;
}

a {
    color: #999;
}

ul, li{
    list-style: none;
}


// colors常用顔色
$colors: (
    // 主色
    "primary": #a80506,
    // 輔色
    "auxiliary": #054ea8,
    // 點綴色
    "Embellishment":#db9e3f,

    // 白色
    "white": #fff,
    // 黑色
    "black": #000,
    // 灰色
    "gray": #777,
);
@each $colorKey, $color in $colors {
    // 文字顔色
    .text-#{$colorKey} {
        color: $color;
    }
    // 背景顔色
    .bg-#{$colorKey} {
        background: $color;
    }
}

// text常用文本
@each $var in (left, center, right) {
    .text-#{$var}{
        text-align: $var;
    }
}
// 使用px to rem插件設定預設字型大小為13px
// 設定基礎字型大小
$base-font-size: 1rem;
// 根據基礎字型大小設定字型大小
$font-size: (
    // 使用px to rem插件，alt + z 轉化px到rem
    // xs為6px
    xxs: 0.4615,
    // xs為10px
    xs: 0.7692,
    // sm為12px
    sm: 0.9231,
    // md為13px
    md: 1,
    // lg為14px
    lg: 1.0769,
    // xl為16px
    xl: 1.2308,
);
@each $sizeKey, $size in $font-size {
    // 文字顔色
    .fs-#{$sizeKey} {
        font-size: $size * $base-font-size;
    }
}


// flex布局
.d-flex{
    display: flex;
}
.flex-1{
    flex: 1;
}
.flex-column{
    // 靈活的項目将垂直顯示，正如一個列一樣。
    flex-direction: column;
}
$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
);
@each $key,$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}
$flex-ac: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
);
@each $key,$value in $flex-ac {
    .ac-#{$key} {
        align-content: $value;
    }
}


// 間距spacing
// bootstrap中，mt-1 -> margin-top: 1rem, pb-2 -> padding-bottom: 2rem

// 類型
$spacing-types: (m: margin, p: padding);
// 方向
$spacing-directions: (t: top, r: right, b: bottom, l:left);
// 尺寸
$base-spacing-size: 1rem; // 基礎尺寸
$spacing-sizes: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3); // 基礎尺寸為準的倍數
@each $typeKey, $type in $spacing-types {
    @each $directionKey, $direction in $spacing-directions {
        @each $sizeKey, $size in $spacing-sizes {
            // 樣版： .mt-1 { margin-top: 0.25rem }
            .#{$typeKey}#{$directionKey}-#{$sizeKey} {
                #{$type}-#{$direction}: $size * $base-spacing-size;
            }
        }
    }
}
// m-1, p-1等隻需要嵌套類型變量$spacing-directions和尺寸變量$spacing-sizes
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // 樣版： .mt-1 { margin-top: 0.25rem }
        .#{$typeKey}-#{$sizeKey} {
            #{$type}: $size * $base-spacing-size;
        }
    }
}

// 水準、垂直方向邊距
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // mx-1,px-1
        .#{$typeKey}x-#{$sizeKey} {
            #{$type}-left: $size * $base-spacing-size;
            #{$type}-right: $size * $base-spacing-size;
        }
        // my-1,py-1
        .#{$typeKey}y-#{$sizeKey} {
            #{$type}-top: $size * $base-spacing-size;
            #{$type}-bottom: $size * $base-spacing-size;
        }
    }
}

// button
.btn{
    border: none;
    border-radius: 0.1538rem;
    font-size: map-get($font-size, 'sm') * $base-font-size;
    padding: 0.4rem 0.6rem;
}

// nav-border
.nav{
    .nav-item{
        border-bottom: 3px solid transparent;
        padding-bottom: 0.2rem;
        // 符号&代表上一層本身
        .active{
            border-bottom: 2px solid #fff;
        }
    }
}

技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-3.使用flex布局并開始搭建web端

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條