Skip to content

骨架

骨架,简单点说,就是页面的通用部分。

比如,管理后台,左侧的菜单,顶部的导航栏,就是每个页面通用的部分。

比如,官网项目,顶部的导航和底部的信息面板,也是每个页面通用的部分。

我们不可能每个页面都写一遍这些公共部分。

写出组件,每个页面导入一次,也非常麻烦,我们是有追求的程序员,我们要优雅(偷懒!)。

基于此,yite-cli 特意从框架层面设计并解决了这个问题。

src/layouts 目录,就是我们 骨架 存放的位置。

bash
└───📁 src/
    └───📁 layouts/
        └───📁 default/
            ├───📁 components/
   └───📄 sideMenu.vue
            └───📄 index.vue

如上所示,default 就是随易科技官方前端模板的骨架目录。

其中,我们提供了默认的 default 骨架。

页面 的理念类似,骨架 也必须以 目录 的形式来进行组织,否则 骨架 将不会生效。

页面 的区别是,这里没有了 route.js 文件,因为 route.js页面 特有的文件,一个页面 匹配 一个 route.js 文件

vue
<template>
    <div class="layout-default">
        <router-view></router-view>
    </div>
</template>

骨架 index.vue 文件的代码,必须有一对 route-view 标签,这就是页面显示的位置。

否则的话,就只会显示骨架,页面内容不会显示。

至于为什么要写 route-view ,请自行查阅 vue-router 文档。

禁用骨架

默认情况下,所有页面都会被默认的 default 骨架所包含。

picture 1

如果我们的页面不需要 骨架,比如 登录 页面。

picture 2

那我们可以在登录页面的 route.js 文件中,设置 layout 属性为 false

javascript
export default {
    layout: false
};

picture 3

这样的话,骨架 就会 消失 了。

其他骨架

如果,项目不止一个 骨架

比如,管理中心用户中心,左侧菜单的表现形式不一样的话。

我们可以自定义多个不同的 骨架

bash
└───📁 src/
    └───📁 layouts/
        ├───📁 admin/
   └───📄 index.vue
        ├───📁 default/
   └───📄 index.vue
        └───📁 user/
            └───📄 index.vue

那么,管理中心骨架 设置如下:

javascript
export default {
    layout: 'admin'
};

用户中心 的骨架如下:

javascript
export default {
    layout: 'user'
};

可以看到,yite-cli 针对项目开发,做了非常细致强大且灵活的 约定

让我们任何水平的开发人员,都能如鱼得水得掌控项目。

再次提现:骨架 以目录的形式组织,且文件名必须为 index.vue

  • 有效的骨架:src/layouts/default/index.vue
  • 无效的骨架:src/layouts/testLayout.vue
  • 无效的骨架:src/layouts/default/index2.vue