From e20f16d89732238c3916ddac4c311472caf8fbbb Mon Sep 17 00:00:00 2001
From: lbwa <mr_lbw@outlook.com>
Date: Thu, 20 Feb 2020 20:47:46 +0800
Subject: [PATCH] feat: layout system

---
 package.json                    |   1 +
 src/App.vue                     |  50 ++++++-----
 src/components/HelloWorld.vue   | 148 --------------------------------
 src/constants.ts                |   1 +
 src/layouts/LMainWithFooter.vue |  25 ++++++
 src/main.ts                     |   1 +
 src/router/index.ts             |  12 +--
 src/shared/utils.ts             |   3 +
 src/views/About.vue             |   5 --
 src/views/Home.vue              |  15 +---
 yarn.lock                       |   5 ++
 11 files changed, 70 insertions(+), 196 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/constants.ts
 create mode 100644 src/layouts/LMainWithFooter.vue
 create mode 100644 src/shared/utils.ts
 delete mode 100644 src/views/About.vue

diff --git a/package.json b/package.json
index 3a23701..a98d934 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.vue b/src/App.vue
index 0228dd3..ced675d 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index d127156..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
-          target="_blank"
-          rel="noopener"
-          >unit-jest</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-})
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..f14e8de
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_LAYOUT = 'LMainWithFooter'
diff --git a/src/layouts/LMainWithFooter.vue b/src/layouts/LMainWithFooter.vue
new file mode 100644
index 0000000..f5a1efa
--- /dev/null
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index f253456..95fdb69 100644
--- a/src/main.ts
+++ b/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
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 0dd1d64..6329943 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
@@ -8,16 +7,7 @@ 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')
   }
 ]
 
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
new file mode 100644
index 0000000..97dcaf5
--- /dev/null
+++ b/src/shared/utils.ts
@@ -0,0 +1,3 @@
+export function isDef<T>(val: T): val is NonNullable<T> {
+  return val !== null && val !== undefined
+}
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a7f4233..37a45c5 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index eca3e17..d315d5d 100644
--- a/yarn.lock
+++ b/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"