feat:新建项目

src/App.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="container">
+    <!-- <div id="nav">
+      <router-link
+        v-for="item in routes"
+        :key="item.path"
+        :to="item.path"
+        :class="{
+          link: true,
+          active: name === item.name,
+        }"
+      >
+        {{ item.name }}
+      </router-link>
+    </div> -->
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+<script>
+import { computed, defineComponent } from "vue";
+import { useRouter, useRoute } from "vue-router";
+export default defineComponent({
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+    console.log("router", router.getRoutes(), route);
+    const routes = computed(() => {
+      return router.getRoutes().filter((e) => e.meta?.isLink);
+    });
+
+    const currentRouteName = computed(() => route.name);
+
+    return {
+      routes,
+      name: currentRouteName,
+    };
+  },
+});
+</script>
+<style lang="scss">
+#app {
+  // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
+  // sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  height: 100%;
+}
+
+#container {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  background-color: rgba(242, 245, 247, 1);
+  // background-color: #ccc;
+  #nav {
+    width: 220px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 30px 0;
+    box-sizing: border-box;
+    background: #f1f1f1;
+    box-shadow: 0 5px 15px 8px rgba(1, 22, 54, 0.795);
+
+    .link {
+      text-decoration: none;
+      color: rgb(0, 0, 0);
+      padding: 10px;
+      transition: all 0.4s;
+      text-align: center;
+
+      &:hover {
+        background: rgba(4, 37, 223, 0.274);
+        color: #f1f1f1;
+      }
+
+      &.active {
+        color: #f1f1f1;
+        background: rgba(17, 120, 255, 0.74);
+      }
+    }
+  }
+  main {
+    flex: 1;
+    width: 100%;
+    // padding: 30px;
+    box-sizing: border-box;
+  }
+}
+</style>