商城-專案結構
阿新 • • 發佈：2020-10-21
商城-專案結構
6.專案結構
開始編碼前，我們先了解下專案的結構：
6.1.目錄結構
首先是目錄結構圖：
6.2.呼叫關係
我們最主要理清index.html、main.js、App.vue之間的關係：
理一下：
- index.html中定義了空的
div，其id為app。 - main.js中定義了Vue物件，並且繫結通過id選擇器，繫結到index.html的div中，因此main.js的內容都將在index.html的div中顯示。
- 而main.js中只有一行內容：
<App/>,這是使用了App元件，即App.vue，也就是說index.html中最終展現的是App.vue中的內容。 - App.vue中也沒有內容，而是定義了vue-router的錨點：
<router-view>,我們之前講過，vue-router路由後的元件將會在錨點展示。 - 最終的結論是：一切路由後的內容都將通過App.vue在index.html中顯示。
6.3.頁面佈局
接下來我們一起看下頁面佈局：
Layout元件是我們的整個頁面的佈局元件：
一個典型的三塊佈局。包含左，上，中三部分：
裡面使用了Vuetify中的2個元件和一個佈局元素：
-
v-navigation-drawer：導航抽屜，主要用於容納應用程式中的頁面的導航連結。
-
v-toolbar：工具欄通常是網站導航的主要途徑。可以與導航抽屜一起很好地工作，動態選擇是否開啟導航抽屜，實現可伸縮的側邊欄。
-
v-content：並不是一個元件，而是標記頁面佈局的元素。可以根據您指定的app元件的結構動態調整大小，使得您可以建立高度可定製的元件。
那麼問題來了：v-content中的內容來自哪裡？
- Layout對映的路徑是
/ - 除了Login以為的所有元件，都是定義在Layout的children屬性，並且路徑都是
/的下面 - 因此當路由到子元件時，會在Layout中定義的錨點中顯示。
- 並且Layout中的其它部分不會變化，這就實現了佈局的共享。