开始编码前,我们先了解下项目的结构。
我们最主要理清index.html、main.js、App.vue之间的关系:
理一下:
div
,其id为app
。<vue-router>
<router-view>
,我们之前讲过,vue-router路由后的组件将会在锚点展示。接下来我们一起看下页面布局。
Layout组件是我们的整个页面的布局组件:
一个典型的三块布局。包含左,上,中三部分:
里面使用了Vuetify中的2个组件和一个布局元素:
v-navigation-drawer
:导航抽屉,主要用于容纳应用程序中的页面的导航链接。v-toolbar
:工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作,动态选择是否打开导航抽屉,实现可伸缩的侧边栏。v-content
:并不是一个组件,而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小,使得您可以创建高度可定制的组件。那么问题来了:v-content
中的内容来自哪里?
/
/
的下面