后台面板SiderBar和TopBar

frontend/src/App.vue

@@ -1,33 +1,60 @@
 <template>
+  <el-container class="container">
+    <el-header>
+      <TopBar />
+    </el-header>
+    <el-container>
+      <el-aside width="200px">
+        <SideBar class="sidebar" />
+      </el-aside>
+      <el-main>
+        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
+          <el-radio-button @click="toggleSideBar">expand</el-radio-button>
+        </el-radio-group>
+      </el-main>
+    </el-container>
+  </el-container>
+
+  <!--
   <img src="./assets/logo.png">
   <nav>
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
   </nav>
   <router-view />
+  -->
 </template>
 
 <script>
-// import { ElConfigProvider } from 'element-plus'
-// import { zhCn } from 'element-plus/es/locale';
+// @ is an alias to /src
+import SideBar from '@/components/SideBar.vue'
+import TopBar from './components/TopBar.vue'
 
 export default {
   name: 'App',
   components: {
-    // ElConfigProvider,
+    SideBar,
+    TopBar
   }
-  // setup() {
-  //   return {
-  //     locale: zhCn,
-  //   }
-  // }
 }
 </script>
 
 <style>
 @import 'normalize.css/normalize.css';
 
+html,
+body,
+#app,
+.container {
+  height: 100%;
+}
+
 #app {
   text-align: center;
 }
+
+.el-header {
+  padding: 0;
+  border: 0;
+}
 </style>