Vue 魔法师 —— 重构“布局”__Vue.js
发布于 23 天前 作者 banyungong 163 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

title: Vue 魔法师 —— layouts date: 2021-03-17 tags:

  • vue categories:
  • 2021

正视布局

开篇想先问你一个问题:

“你认为你目前所在 Vue 项目中的 layouts 设置有什么问题吗?”

images (1).jpg

你可能会回答:

“没有啥问题啊。因为不就是简单的在外层套一个 Layout 组件吗?”

我想一定类似这样吧:

<template>
  <MyLayout>
    <h1>Here is my page content</h1>
  </MyLayout>
</template>

<script>
import MyLayout from '@/layouts/MyLayout.vue'
export default {
  name: 'MyPage',
  components: { MyLayout }
}
</script>

或者这样,以本瓜所在项目举例,Layout 设置:

  • 如果你用过 vue-element-admin 一定很熟悉这样的路由设置(业务组件是 Layout 组件的子组件)
const AdminLayout = () => import('@/views/admin/homepage/layout.vue')
const OrgList = () => import('@/views/admin/admOrg/orgList.vue')
const OrgDetail = () => import('@/views/admin/admOrg/orgDetail.vue')

export const admOrgRouters = {
  path: '/orgManage',
  component: AdminLayout,
  redirect: '/orgList',
  name: '组织管理',
  iconClass: 'orgManage',
  children: [
    orgList,
    orgDetail,
  ],
  meta: {
    roles: ['isAdmin', 'ordinaryAdmin'],
    title: '组织管理'
  }
}

nice!如果你的项目也类似这样的话,就可以继续看后文了~(不然就点赞👍再关闭❎退出啦😄)

发现痛点

这样在外层包裹设置 Layout 似乎也没什么不对,但是我们细想一下:

  1. 我们需要在不同的页面 import Layout,而“重复引入”永远是程序员最讨厌的事之一;
  2. 我们必须使 Layout 包裹着我们的内容,这多少会有限制;
  3. 这样做使我们的代码更重并且迫使组件担负起渲染布局的责任(组件和布局没有拆分的够开);

虽然这些其实也并不是一些什么大不了的点,但是由于受到 NuxtJS 的启发,所以咱们决定进行 breaking change,改变这一现状。

那 NuxtJS 究竟启发了些什么呢?简而言之,即:

你可以定义【布局】为组件的一个【属性】,而不是设置一个个布局父组件到你的应用中。

附:nuxtjs-layouts

让我们看看在我们的 Vue 项目中如何实现这一启发?

项目准备

我们依然用 Vue CLI 来快速构建我们的项目:

vue create vue-layouts

你可以选择 Vue2+ 或 Vue3+,本篇都会作相应介绍。

我们清除一些初始化带来的不必要的文件,比如 HelloWorld.vue,然后新建新文件,得此目录:

--src
----views
------About.vue
------Contacts.vue
------Home.vue
----App.vue
----main.js
----router.js

然后在 App.vue 中代码如下:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contacts">Contacts</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Home.vue 代码如下:

<template>
  <div>
    <h1>This is a home page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue 代码如下:

<template>
  <div>
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

Contacts.vue 代码如下:

<template>
  <div>
    <h1>This is a contacts page</h1>
  </div>
</template>

<script>
export default {
  name: "Contacts"
}
</script>

router.js 代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/contacts',
    name: 'Contacts',
    component: () => import('@/views/Contacts.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

再在 main.js 调用 router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

好了,准备工作已经做好了。我们可以得到这样的一个界面:

layouts1.png

就是三个简单的路由跳转,组件切换。到这里肯定没啥问题~

构造布局

重点来辣!

我们新建一个 layouts/AppLayout.vue 组件。

  • Vue2
<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
const defaultLayout = 'AppLayoutDefault'
export default {
  name: "AppLayout",
  computed: {
    layout() {
      const layout = this.$route.meta.layout || defaultLayout
      return () => import(`@/layouts/${layout}.vue`)
    }
  }
}
</script>

这一段代码看似简单,却是我们新布局系统的核心

在这个模板中,我们加入了动态组件 ,并且为之加入了名为 “layout” 的计算属性。

在计算属性中我们可以看到它会【根据路由】返回【对应的布局组件】并加载到【动态组件】中去,否则就启用默认布局 —— defaultLayout。

  • 在 Vue3 中代码如下:
<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
import AppLayoutDefault from './AppLayoutDefault'
export default {
  name: "AppLayout",
  data: () => ({
    layout: AppLayoutDefault
  }),
  watch: {
    $route: {
      immediate: true,
      async handler(route) {
        try {
          const component = await import(`@/layouts/${route.meta.layout}.vue`)
          this.layout = component?.default || AppLayoutDefault
        } catch (e) {
          this.layout = AppLayoutDefault
        }
      }
    }
  }
}
</script>

Vue 3 Composition API 的实现:

<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
import AppLayoutDefault from './AppLayoutDefault'
import { markRaw, watch } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'AppLayout',
  setup() {
    const layout = markRaw(AppLayoutDefault)
    const route = useRoute()
    watch(
      () => route.meta,
      async meta => {
        try {
          const component = await import(`@/layouts/${meta.layout}.vue`)
          layout.value = component?.default || AppLayoutDefault
        } catch (e) {
          layout.value = AppLayoutDefault
        }
      },
      { immediate: true }
    )
    return { layout }
  }
}
</script>

多种布局

有了上一节的精髓,再看我们如何完善我们的布局系统~

还记得我们在初始化时准备的三个核心组件:HomeAboutContacts,为此我们准备创建三种布局方式。(当然,你可以自定义任意多种布局方式,随你喜欢。)

在此之前我们对 App.vue 进行一个小重构:

新建一个文件:layouts/AppLayoutLinks.vue,把 App.vue 代码抽到此处,留下一个干净的 App.vue。

// 新建的 AppLayoutLinks.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/contacts">Contacts</router-link>
  </div>
</template>

<script>
export default {
name: "AppLayoutLinks"
}
</script>

<style scoped>
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

// 干净的 App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

然后新建三种布局方式文件~

  • 布局方式一:AppLayoutHome.vue
<template>
  <div>
    <header class="header" />
    <AppLayoutLinks />
    <slot />
  </div>
</template>

<script>
import AppLayoutLinks from '@/layouts/AppLayoutLinks'
export default {
  name: "AppLayoutHome",
  components: {
    AppLayoutLinks
  }
}
</script>

<style scoped>
.header {
  height: 5rem;
  background-color: green;
}
</style>
  • 布局方式二:AppLayoutAbout.vue
<template>
  <div>
    <header class="header" />
    <AppLayoutLinks />
    <slot />
  </div>
</template>

<script>
import AppLayoutLinks from '@/layouts/AppLayoutLinks'
export default {
  name: "AppLayoutAbout",
  components: {AppLayoutLinks}
}
</script>

<style scoped>
.header {
  height: 5rem;
  background-color: blue;
}
</style>
  • 布局方式三:AppLayoutContacts
<template>
  <div>
    <header class="header" />
    <AppLayoutLinks />
    <slot />
  </div>
</template>

<script>
import AppLayoutLinks from '@/layouts/AppLayoutLinks'
export default {
  name: "AppLayoutContacts",
  components: {
    AppLayoutLinks
  }
}
</script>

<style scoped>
.header {
  height: 5rem;
  background-color: red;
}
</style>

这里 demo 布局方式就简单的颜色区别作以区分,主要是“会意”。默认布局就不作颜色更改,不做赘述。

配置路由

如果你有仔细看 构造布局 这一精髓,你肯定看到了 this.$route.meta.layout 这一调用。所以我们需要返回路由进行设置,代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      layout: 'AppLayoutHome'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
    meta: {
      layout: 'AppLayoutAbout'
    }
  },
  {
    path: '/contacts',
    name: 'Contacts',
    component: () => import('@/views/Contacts.vue'),
    meta: {
      layout: 'AppLayoutContacts'
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

打完收工

上面的都设置好了,最后我们需要将 AppLayout.vue 绑定在 App.vue 上:

  <div id="app">
    <AppLayout>
      <router-view />
    </AppLayout>
  </div>

打完收工!

你可以把项目 download 到本地跑跑看:github 地址

layouts2.png

如此,我们便实现了一个新的布局系统。灵感来自沙宣美发系列,哦,不,灵感来自 NuxtJS~你感受到了吗?

综上:我们以往的布局就是包裹在组件里面,或者包裹在路由里面,往往都需要多处引用。如果存在多种布局方式,就更为繁琐,没有一个抽离的布局系统作清晰的划分。本文通过 “动态组件”+“监听属性”+“路由配置”+“全局挂载” 的方式将布局系统抽离,免去多处引入,免去不清晰的目录结构。在构建项目初期,就搭建出这一套布局,会是相当明智的做法!如果是老项目,存在多种布局,有空也可以重构一下,感受感受。为什么不呢?

撰文不易✍,点赞鼓励👍,关注我的公众号【掘金安东尼】😎,诚挚输出中…

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 掘金安东尼 原文链接:https://juejin.im/post/6940555448198103070

回到顶部