关于vue开发时，项目结构布局总结---（经验篇）

最近结束了一个项目，总结下这个项目结构。先看下这个项目大致布局结构

首页（图1）

个人中心（图2）

先来看图1 分为头部 内容 底部 三部分 ，代码结构如下

然后这个配置好的文件，当然在配置路由里使用啦

这些路由配置好后，开始整合，在main.js里面use一下


以上是图1首页的一个布局流程。大多数同学也能想到，重点在下面。
问题，在个人中心页面，左边菜单 右边内容区域。而且头部和底部也一样。然后就接着码代码了。
点击左侧菜单，右侧内容区域显示对应的内容，把每个页面单独封装下，然后加一些控制显示就可。
但是这样就有个问题 如果右侧显示页面只做展示，没有在这个页面基础上操作，那还可以；；；如果这个页面基础上有其他操作，比如跳转详情之类的，显示的肯定还是在个人中心里面的，左侧菜单栏还是要有的，这样页面扩展就会受到限制。

解决 你不妨把个人中心这个界面，再次构建一下结构； 头部 -左侧菜单-右侧内容 底部。然后在路由配置那里，类似图1的配置结构，在写一份；

这样后续的功能添加也便于维护。

最后再补充下
细心的同学可能看到这样的代码

<router-view v-slot="{ Component, route }">
          <transition
            :name="route.meta.transition || 'fade-transform'"
            mode="out-in"
          >
            <component :is="Component" :key="route.fullPath" />
          </transition>
        </router-view>

router-view浅析
＜router-view＞ 的v-slot中的Component是一个组件选项对象，如果你在浏览器的控制台查看，它类似于下面的结构

而route就是RouteLocationNormalized，你可以获取RouteLocationNormalized中的参数，比如meta中你自定义的内容

transition组件浅析
我们可以给 Transition 组件传一个 name prop 来声明一个过渡效果名
对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如，上方例子中被应用的 class 将会是 fade-transform-enter-active 而不是 v-enter-active。
mode属性是一个过渡模式
我们可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的，好在我们可以通过向 传入一个 mode prop 来实现


想了解更多vue自带组件可
链接: https://cn.vuejs.org/guide/built-ins/transition.html#javascript-hooks