商城-项目结构
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中的其它部分不会变化,这就实现了布局的共享。