商城-项目结构

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中的其它部分不会变化，这就实现了布局的共享。