vue和nuxt.js设置多个layout（页面公共内容布局）

需求背景：
一个项目里同时存在pc端和移动端，如果我只想让移动端端样式适配rem，就可以用到layout

1. 新建一个layout文件夹
   
2. 在main.js中加入

import defaultPage from "../layout/default";
import mobilePage from "../layout/mobile";
Vue.component("default-page", defaultPage);
Vue.component("mobile-page", mobilePage);

3. router index.js中配置页面需要使用的不同layout名称
   

4. App.vue中配置

<template>
  <div id="app">
    <component :is="layout">
      <router-view />
    </component>
  </div>
</template>
  data() {
    return {
      default_layout: "default-page",
    };
  },
  mounted() {
    let doc = document.documentElement;
    let width = doc.getBoundingClientRect().width;
    if (width > 600) {
      width = 600;
    }
    let rem = width / 3.75;
    doc.style.fontSize = rem + "px";
  },
  computed: {
    layout() {
      return this.$route.meta.layout || this.default_layout;
    },
  },

实现的效果

默认的页面效果

---

nuxt.js设置layout

在layouts文件中新建一个文件

<template>
	<div>
	    <nuxt/>
	</div>
</template>
  mounted() {
    let doc = document.documentElement;
    let width = doc.getBoundingClientRect().width;
    if (width > 600) {
      width = 600;
    }
    let rem = width / 3.75;
    doc.style.fontSize = rem + "px";
  },

直接在页面引入

export default {
	layout: 'mobile-page',
}