Vue3之 vue-cli2

1、如何搭建一个简易版（毛坯房）的后台管理？

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Layout.vue

<template>
  <pug-header></pug-header>
  <article class="pug-ui-article">
    <pug-slider></pug-slider>
    <pug-main></pug-main>
  </article>
</template>

<script>
import PugHeader from '@/layout/components/PugHeader'
import PugSlider from '@/layout/components/PugSlider'
import PugMain from '@/layout/components/PugMain'
export default {
  name: "Layout.vue",
  components:{
    PugHeader,
    PugSlider,
    PugMain
  }
}
</script>

<style>
  /*网格布局参考：https://www.cnblogs.com/jwyblogs/p/11757968.html*/
  *{padding:0;margin: 0}
  .pug-ui-header{height: 48px;line-height: 48px;background:red;}
  .pug-ui-article{display: grid;grid-template-columns: 200px auto;min-height: calc(100vh - 48px);
    color:#fff;
  }
  .pug-ui-slider{background:yellow}
  .pug-ui-content{background:black}

</style>

PugHeader.vue

<template>
  <header class="pug-ui-header">
    <router-link v-if="!isAuth" to="/login">去登录</router-link>
    <button v-if="isAuth" @click="logout">退出</button>
  </header>
</template>

<script>
export default {
  name: "PugHeader.vue",
  components:{
  },
  computed:{
    isAuth(){
      return sessionStorage.isAuth;
    }
  },
  methods:{
    logout(){
      sessionStorage.removeItem("isAuth");
      var currentPath = sessionStorage.getItem("currpath");
      this.$router.push({name:"login",query:{back:currentPath}});
    }
  }
}
</script>

PugSlider.vue

<template>
  <div class="pug-ui-slider">
    <ul>
      <li><router-link to="/index">首页</router-link></li>
      <li><router-link to="/user">用户管理</router-link></li>
      <li><router-link to="/course">课程管理</router-link></li>
      <li><router-link to="/order">订单管理</router-link></li>
    </ul>
  </div>
</template>

PugMain.vue

<template>
  <div class="pug-ui-content">
    <router-view></router-view>
  </div>
</template>

以上布局就完成了，后台后置的布局。还有前台和错误页面的代码如下：

login.vue

<template>
  <h1>我是登录页面</h1>
  <div>
    <p>账号：<input type="text" v-model.trim="account"></p>
    <p>密码：<input type="text" v-model.trim="password"></p>
    <p>
      <button @click="logined">登录</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "login.vue",
  data() {
    return {
      account: "taimi",
      password: "123456"
    }
  },

  methods: {
    logined() {
      sessionStorage.setItem("isAuth", true);
      var back = this.$route.query.back || "/";
      this.$router.push(back);
    }
  }

}
</script>

<style scoped>

</style>

error.vue

<template>
    <h1>我是错误页面</h1>
    <router-link to="/">点我返回首页</router-link>
</template>

<script>
export default {
  name: "error.vue",
}
</script>

<style scoped>

</style>

最关键的路由配置index.js

//1： 导入路由
import {