前言
上一篇主要講了我學習前端的一個經歷，以及為什么選擇BuildAdmin作為深入前端學習的原因.同事也大致聊了一下學習前端需要使用哪些技術棧。
本篇文章來拆解一下BuildAdmin的前端代碼結構，和布局實現的細節。
前端代碼結構
必須先了解項目的結構，才能明確每個功能模塊的代碼在哪寫。BuildAdmin前端目錄如下，我只對一級目錄進行了粗略的標注，詳細的可以去官網看。
在本地需要使用vue-cli腳手架來構建項目，在構建時會有很多選項，包括使用的vue版本和各種插件。
npm install -g @vue/cli
vue create buildadmin
創建之后，基本的目錄結構就出來了，后續就可以在各個功能目錄添加子目錄和模塊。
環境安裝
在創建好項目之后，還需要安裝一些額外的依賴，例如sass、bable等。
1. 安裝sass
npm i sass sass-loader
2. 安裝babel
babel的主要功能那是將ES語法轉換成瀏覽器識別的js
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node @babel/polyfill
3. 安裝babel，使用可選鏈?.
在BuildAdmin中，有很多時候都會出現 ?.，這便是防止出現空指針異常的可選鏈寫法，原則就是：有就用，沒有就不用。
假設一個對象obj，沒有name屬性。如果obj.name則會報空指針錯誤，如果使用obj?.name則輸出的是obj。
npm install --save-dev @babel/plugin-proposal-optional-chaining4. 關閉lint
lint會檢查編碼中格式的錯誤，我個人不是很喜歡，所以我會在vue.config.js中關掉。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false
})
任何一個vue項目都是從main.ts開始，按照層級開始編寫各個組件。而App.vue中作為第一個節點，引入整體的布局組件。
架構布局
BuildAdmin作為一個管理平臺，首先要完成布局部分。我們先看BuildAdmin的布局：
可以看到BuildAdmin的整體布局是由：菜單邊欄aside、導航header和中心區域main組成的。即ElementPlus中的aside、header、main布局。
這就是官網的代碼。
布局實現
從App.vue作為根節點，開始綁定組件。
<layout>就是定義的整個布局。
上面是我從Element的官網copy的布局代碼。BuildAdmin在實現布局時，將aside、header、main都拆分成了單獨的組件，如下圖所示：
后面我也拆分了的布局代碼，將aside、header和main拆分成了三個組件，這樣便于閱讀、定義css和實現js邏輯等。。
要注意的事，拆分成三個組件之后，在css中需要添加一個flex-direction屬性，在拆分之間是沒有的。答案在官網中給出來了：如果<el-container>里如果有el-header元素，則會默認為垂直排列。
后面的拆分，el-header被封裝成Header組件了。el-container里面就沒有el-header元素了，所以就變成水平分布，這樣header就在main的就布局在同一水平線上了，而非上下排列。為了保證上下排列，則必須將此屬性設置為column。
實現思路
在將頁面拆分成三個部分之后，就需要定義css渲染，來確定各個部分的區域大小和樣式。header主要用來渲染面包屑標簽，所以暫時先不定義這一塊的樣式。之后會根據導航標簽大小和頁面布局調整高和寬，即height和width。
main主要展示各個菜單路由切換后的頁面，只要確定height和width即可，這個可以后面實現完路由再調整。所以根據開發需要，可以先實現aside的樣式。
aside渲染
aside.vue中此時只有一個<el-aside>元素，此時我們需要定義它的css樣式。
1. css
在style中定義css時，指定sass為css預處理器。
v-bind是vue3中的新用法。其中的menuWidth參數是pinia定義的狀態變量，為260px。這里為什么要使用v-bind，而不是直接寫260呢？因為aside的寬度是變化的，因為后面菜單折疊需要動態修改寬度，所以這里不能寫死。
而且因為菜單欄要放在aside中，且寬度一致，所以直接使用一個變量方便同步控制。那至于為什么定義成260，接著往下看。
那么，css中這些var里面的–開頭的變量是哪里來的啊？ 這些其實就是el和自定義全局變量，在控制臺都可以查看到。
其中–ba開頭的，是BuildAdmin在var.scss中自定義的全局變量。
2. 開發技巧
如果不知道組件的css在哪里定義的，就可以在控制臺查看。
可以看到aside的樣式：margin上下都是16px，所以上下共有32px。32px + height = 100%，所以aside的height就是100vh-32px？同時，也可以看到width是260px。
3. 渲染效果
至此aside就渲染好了。
雖然現在看起來也沒什么變化，但是添加完logo和菜單之后，就會大有不同。
結語
第二篇開篇主要講了項目的創建和環境變量的安裝。后面闡述了邊欄aside的設計思路，以及對css的定義和解讀。只涉及了基本的vue和ElementUI的使用。
同時，本篇文章提及的控制臺查看屬性的技巧，下一篇主要講的菜單渲染，將會涉及vue-router等技術。
