0
点赞
收藏
分享

微信扫一扫

VUE-项目结构

科牛 2022-03-11 阅读 83


3.项目结构

开始编码前,我们先了解下项目的结构。

3.1.目录结构

VUE-项目结构_vue

3.2.调用关系

我们最主要理清index.html、main.js、App.vue之间的关系:

VUE-项目结构_页面布局_02

理一下:


  • index.html:html模板文件。定义了空的​​div​​​,其id为​​app​​。
  • main.js:​实例化vue对象​,并且绑定通过id选择器,绑定到index.html的div中,因此​main.js的内容都将在index.html的div中显示​。main.js中使用了App组件,即App.vue,也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后,就拥有了vue的内容(包括组件、样式等),所以,main.js也是​webpack打包的入口​。
  • index.js:定义请求路径和组件的映射关系。相当于之前的​​<vue-router>​
  • App.vue中也没有内容,而是定义了vue-router的锚点:​​<router-view>​​,我们之前讲过,vue-router路由后的组件将会在锚点展示。
  • 最终结论:​一切路由后的内容都将通过App.vue在index.html中显示。
  • 访问流程:用户在浏览器输入路径,例如:http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件,并把该组件渲染在index.html文件中(id为“app”的div中)

3.3.页面布局

接下来我们一起看下页面布局。

Layout组件是我们的整个页面的布局组件:

VUE-项目结构_项目结构_03

一个典型的三块布局。包含左,上,中三部分:

VUE-项目结构_vue_04

里面使用了Vuetify中的2个组件和一个布局元素:

  • ​v-navigation-drawer​​ :导航抽屉,主要用于容纳应用程序中的页面的导航链接。

VUE-项目结构_锚点_05

  • ​v-toolbar​​:工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作,动态选择是否打开导航抽屉,实现可伸缩的侧边栏。

VUE-项目结构_页面布局_06

  • ​v-content​​:并不是一个组件,而是标记页面布局的元素。可以根据您指定的​app​组件的结构动态调整大小,使得您可以创建高度可定制的组件。

那么问题来了:​​v-content​​中的内容来自哪里?

VUE-项目结构_html_07


  • Layout映射的路径是​​/​
  • 除了Login以为的所有组件,都是定义在Layout的children属性,并且路径都是​​/​​的下面
  • 因此当路由到子组件时,会在Layout中定义的锚点中显示。
  • 并且Layout中的其它部分不会变化,这就实现了布局的共享。


举报

相关推荐

0 条评论