初始化layout - mingliao/nuxt_elm GitHub Wiki

开发流程

参考layout，创建模板，如文档中所示，必须要有<nuxt/>元素包含， 参考源代码示例vue2-elm/src/App.vue 创建layouts/default.vue

<template>
  <div>
    <transition name="router-fade" mode="out-in">
      <keep-alive>
        <nuxt v-if="$route.meta.keepAlive"/>
        <!--<router-view v-if="$route.meta.keepAlive"></router-view>-->
      </keep-alive>
    </transition>
    <transition name="router-fade" mode="out-in">
      <nuxt v-if="!$route.meta.keepAlive"/>

      <!--<router-view v-if="!$route.meta.keepAlive"></router-view>-->
    </transition>
    <svg-icon></svg-icon>
  </div>
</template>

<script>
  import svgIcon from '~/components/common/svg'
  export default {
    components: {
      svgIcon
    }
  }
</script>

<style lang="scss">
  @import '~assets/style/common';
  .router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
  }
  .router-fade-enter, .router-fade-leave-active {
    opacity: 0;
  }
</style>

备注

  • sass引入 sass等css预编译参考How to use pre-processors?
  • assert 静态资源目录放置参考assets
  • svg引入 这里svg作为一个组件引入，layout也是一个vue文件。
⚠️ **GitHub.com Fallback** ⚠️