提取layout，，统一代码风格，优化路由

src/api/user.js

@@ -1,5 +1,4 @@
 import api from './index'
-
 // axios
 import request from '@/utils/request'
 

src/assets/css/index.scss

@@ -1,14 +1,13 @@
 @import './variables.scss';
 @import './mixin.scss';
- 
+
 html,
-body
+body .app {
-.app {
   color: #333333;
   font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
   background-color: $background-color;
 }
- 
+
-.app-container{
+.app-container {
-  padding-bottom:50px;
+  padding-bottom: 50px;
-}
+}

src/config/router.config.js

@@ -1,41 +0,0 @@
-/**
- * 基础路由
- * @type { *[] }
- */
-export const constantRouterMap = [
-  {
-    path: '/',
-    name: 'index',
-    component: () => import('@/layouts/AppLayout'),
-    redirect: '/home',
-    meta: {
-      title: '首页',
-      keepAlive: false
-    },
-    children: [
-      {
-        path: '/',
-        component: () => import('@/layouts/TabBarLayout'),
-        redirect: '/home',
-        meta: {
-          title: '首页',
-          keepAlive: false
-        },
-        children: [
-          {
-            path: '/home',
-            name: 'Home',
-            component: () => import('@/views/home/index'),
-            meta: { title: '首页', keepAlive: false }
-          },
-          {
-            path: '/about',
-            name: 'About',
-            component: () => import('@/views/home/about'),
-            meta: { title: '关于我', keepAlive: false }
-          }
-        ]
-      }
-    ]
-  }
-]

src/layouts/AppLayout.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="app-containter">
-    <keep-alive v-if="$route.meta.keepAlive">
-      <router-view></router-view>
-    </keep-alive>
-    <router-view v-else></router-view>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AppLayout'
-}
-</script>

src/main.js

@@ -8,15 +8,14 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
-// 引入全局样式
-import '@/assets/css/index.scss'
 // 设置 js中可以访问 $cdn
 import { $cdn } from '@/config'
 Vue.prototype.$cdn = $cdn
 
 // 全局引入按需引入UI库 vant
 import '@/plugins/vant'
-
+// 引入全局样式
+import '@/assets/css/index.scss'
 // 移动端适配
 import 'lib-flexible/flexible.js'
 

src/router/index.js

@@ -1,27 +1,28 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import { constantRouterMap } from '@/config/router.config'
+import { constantRouterMap } from './router.config.js'
 
 // hack router push callback
 const originalPush = Router.prototype.push
-Router.prototype.push = function push (location, onResolve, onReject) {
+Router.prototype.push = function push(location, onResolve, onReject) {
   if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
   return originalPush.call(this, location).catch(err => err)
 }
 
 Vue.use(Router)
 
-const createRouter = () => new Router({
+const createRouter = () =>
-  mode: 'history',
+  new Router({
-  base: process.env.BASE_URL,
+    mode: 'history',
-  scrollBehavior: () => ({ y: 0 }),
+    base: process.env.BASE_URL,
-  routes: constantRouterMap
+    scrollBehavior: () => ({ y: 0 }),
-})
+    routes: constantRouterMap
+  })
 
 const router = createRouter()
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter () {
+export function resetRouter() {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }

src/router/router.config.js

@@ -0,0 +1,29 @@
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/',
+    component: () => import('@/views/layouts/index'),
+    redirect: '/home',
+    meta: {
+      title: '首页',
+      keepAlive: false
+    },
+    children: [
+      {
+        path: '/home',
+        name: 'Home',
+        component: () => import('@/views/home/index'),
+        meta: { title: '首页', keepAlive: false }
+      },
+      {
+        path: '/about',
+        name: 'About',
+        component: () => import('@/views/home/about'),
+        meta: { title: '关于我', keepAlive: false }
+      }
+    ]
+  }
+]

src/views/home/about.vue

@@ -1,6 +1,6 @@
 <!-- home -->
 <template>
-  <div class="app-container">
+  <div class="about-container">
     <div class="warpper">
       <div class="list">
         <div class="logo"></div>
@@ -46,8 +46,8 @@ export default {
       // 请求接口数据，仅作为展示，需要配置src->config下环境文件
       const params = { user: 'sunnie' }
       getUserInfo(params)
-        .then(() => {})
+        .then(() => { })
-        .catch(() => {})
+        .catch(() => { })
     },
     // Action 通过 store.dispatch 方法触发
     doDispatch() {
@@ -60,7 +60,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.app-container {
+.about-container {
   background: #fff;
   height: 100vh;
   box-sizing: border-box;

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <!-- home -->
 <template>
-  <div class="app-container">
+  <div class="index-container">
     <div class="warpper">
       <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
       <h2 class="demo-home__desc">
@@ -39,13 +39,13 @@ export default {
 
   computed: {},
 
-  mounted() {},
+  mounted() { },
 
   methods: {}
 }
 </script>
 <style lang="scss" scoped>
-.app-container {
+.index-container {
   .warpper {
     padding: 12px;
     background: #fff;

src/views/layouts/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="tabbar-layout-containter">
+  <div class="app-container">
-    <div class="tabbar-layout-content">
+    <div class="layout-content">
       <keep-alive v-if="$route.meta.keepAlive">
         <router-view></router-view>
       </keep-alive>
       <router-view v-else></router-view>
     </div>
-    <div class="tabbar-layout-footer">
+    <div class="layout-footer">
       <TabBar :data="tabbars" @change="handleChange" />
     </div>
   </div>
@@ -15,7 +15,7 @@
 <script>
 import TabBar from '@/components/TabBar'
 export default {
-  name: 'TabBarLayout',
+  name: 'AppLayout',
   data() {
     return {
       tabbars: [

vue.config.js

@@ -64,14 +64,13 @@ module.exports = {
     // }
   },
   css: {
-    extract: IS_PROD,
+    extract: IS_PROD, //是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
     sourceMap: false,
     loaderOptions: {
       scss: {
         // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
         // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
         prependData: `
-          @import "assets/css/index.scss";
           @import "assets/css/mixin.scss";
           @import "assets/css/variables.scss";
           $cdn: "${defaultSettings.$cdn}";