feat: layout system

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "normalize.css": "^8.0.1",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"

src/App.vue

@@ -1,32 +1,40 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
+    <transition name="layout">
+      <component :is="layoutComponent">
+        <router-view />
+      </component>
+    </transition>
   </div>
 </template>
 
-<style lang="scss">
-#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;
+<script>
+import { DEFAULT_LAYOUT } from './constants'
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+export default {
+  name: 'App',
 
-    &.router-link-exact-active {
-      color: #42b983;
+  computed: {
+    layoutComponent() {
+      // for trigger framework internal dep collection, make `layoutComponent`
+      // reactive
+      const layout = this.$route.meta.layout || DEFAULT_LAYOUT
+      // A component name should be embedded by template string directly.
+      // Otherwise, `Critical dependency: the request of a dependency is an
+      // expression` warning occurred.
+      return () =>
+        import(
+          /* webpackChunkName: 'layout-[request]' */ `./layouts/${layout}.vue`
+        )
     }
   }
 }
+</script>
+
+<style lang="sass">
+#app
+  font-family: Avenir, Helvetica, Arial, sans-serif
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  color: #2c3e50
 </style>

src/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LAYOUT = 'LMainWithFooter'

src/layouts/LMainWithFooter.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="l-mwf">
+    <router-view />
+    <footer class="l-mwf__footer">
+      Copyright &copy; {{ new Date().getFullYear() }}
+      <a href="http://github.com/lbwa" target="_blank" rel="noopener noreferrer"
+        >Bowen</a
+      >
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LMainWithFooter'
+}
+</script>
+
+<style lang="sass" scoped>
+.l-mwf
+  &__footer
+    padding: 20px 0
+    font-size: 12px
+    text-align: center
+</style>

src/main.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import 'normalize.css'
 
 Vue.config.productionTip = false
 

src/router/index.ts

@@ -1,23 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
   }
 ]
 

src/shared/utils.ts

@@ -0,0 +1,3 @@
+export function isDef<T>(val: T): val is NonNullable<T> {
+  return val !== null && val !== undefined
+}

src/views/Home.vue

@@ -1,18 +1,11 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
+  <div class="home">home</div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
+  name: 'Home'
 }
 </script>
+
+<style lang="sass" scoped></style>

yarn.lock

@@ -6835,6 +6835,11 @@ normalize-url@^3.0.0:
   resolved "https://registry.npm.taobao.org/normalize-url/download/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha1-suHE3E98bVd0PfczpPWXjRhlBVk=
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npm.taobao.org/normalize.css/download/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha1-m5iiCHOLnMJjTKrLxC0THJdIe/M=
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"