feat(router): components importer implemented

Author: lbwa

src/App.vue

@@ -12,7 +12,7 @@
 export default {
   data () {
     return {
-      layout: 'Login'
+      layout: 'material' // Default layout file name
     }
   },
 

src/layout/Material.vue

@@ -4,7 +4,7 @@
 
     <el-container>
       <el-header>header</el-header>
-      <el-main>main</el-main>
+      <router-view/>
       <el-footer>footer</el-footer>
     </el-container>
   </el-container>

src/router/components/constant.js

@@ -0,0 +1,6 @@
+// ! constant component path, based on `/src` directory
+export default [
+  'layout/Login',
+  'layout/Material',
+  'pages/Home'
+]

src/router/components/importer.js

@@ -0,0 +1,22 @@
+export default function createImporters (components) {
+  const importers = {}
+  components.forEach(path => {
+    const chunkName = createChunkName(path)
+    if (!importers[chunkName]) {
+      importers[chunkName] = () => import(
+        /* webpackChunkName: 'async/[request][index]' */
+        `SOURCE/${path}`
+      )
+    }
+  })
+  return importers
+}
+
+function createChunkName (path) {
+  const normalizePathSection = path.split('/').map((pathSection, index) => {
+    return index === 0
+      ? pathSection.replace(/^[A-Z]/, matchKey => matchKey.toLowerCase())
+      : pathSection.replace(/^[a-z]/, matchKey => matchKey.toUpperCase())
+  })
+  return normalizePathSection.join('')
+}

src/router/components/index.js

@@ -0,0 +1,4 @@
+import createImporters from './importer'
+import constant from './constant'
+
+export const constantComponents = createImporters(constant)

src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { constantComponents } from './components'
 
 Vue.use(Router)
 
@@ -8,7 +9,7 @@ export default new Router({
     {
       path: '/',
       name: 'home',
-      component: () => import(/* webpackChunkName: 'home' */ `PAGES/Home`)
+      component: constantComponents.pagesHome
     }
   ]
 })