first

src/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped >
+div {
+  box-sizing: border-box;
+}
+</style>

src/index.css

@@ -0,0 +1,6 @@
+/* ./src/index.css */
+
+/*! @import */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/layout/AppLayout.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="layout-page">
+        <div class="layout-main">
+            <app-menu class="menu" :menus="menus" />
+            <router-view class="main"></router-view>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '@vue/reactivity';
+import { AppMenu } from './components';
+let menus = ref([
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    }
+])
+</script>
+
+<style lang="scss" scoped>
+.layout-page {
+    width: 100vw;
+    height: 100vh;
+    @apply flex justify-center items-center;
+}
+
+.layout-main {
+    @apply bg-black rounded-lg mb-10 text-white shadow-xl flex;
+    height: 800px;
+    width: 1400px;
+    .menu {
+        width: 70px;
+    }
+    .main {
+        @apply p-4;
+        flex: 1;
+    }
+}
+</style>

src/layout/components/AppMenu.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <!-- menu -->
+    <div class="app-menu">
+      <div class="app-menu-header">
+        <div class="app-menu-logo">
+          <img src="@/assets/logo.png" class="w-10 h-10" alt="logo" />
+        </div>
+      </div>
+      <div class="app-menu-list">
+        <div class="app-menu-item" v-for="(item,index) in menus" :key="index">
+          <router-link class="app-menu-item-link mb-4 mt-4" :to="item.href">
+            <i class="iconfont app-menu-item-icon" :style="iconStyle" :class="item.icon"></i>
+            <span v-if="isText" class="app-menu-item-text ml-3">{{ item.text }}</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "@vue/runtime-core";
+
+const props = defineProps({
+  isText: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: '30px'
+  },
+  color: {
+    type: String,
+    default: '#fff'
+  },
+  menus: {
+    type: Array,
+    default: () => []
+  }
+})
+
+let iconStyle = ref({})
+onMounted(() => {
+  // 初始化
+  iconStyle.value = {
+    fontSize: props.size,
+    color: props.color
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.app-menu {
+  @apply flex-col items-center justify-center p-4;
+  max-width: 100px;
+}
+.app-menu-item-link,
+.app-menu-header {
+  @apply flex items-center justify-center;
+}
+
+img {
+  color: #fff;
+}
+</style>

src/layout/components/index.ts

@@ -0,0 +1,3 @@
+import AppMenu from "./AppMenu.vue";
+
+export { AppMenu };

src/main.ts

@@ -0,0 +1,16 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import naive from "naive-ui";
+import "vfonts/Lato.css";
+import "vfonts/FiraCode.css";
+
+// tailwind css
+import "./index.css";
+
+import router from "@/router";
+
+const app = createApp(App);
+app.use(router);
+app.use(naive);
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from "vue-router";
+import AppLayout from "@/layout/AppLayout.vue";
+const layoutRouter = [
+  {
+    path: "",
+    name: "home",
+    component: () => import("@/views/home/index.vue"),
+  },
+];
+
+const routes = [
+  {
+    path: "/",
+    component: AppLayout,
+    children: layoutRouter,
+  },
+];
+
+export default createRouter({
+  routes: routes,
+  history: createWebHistory(),
+});

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/views/home/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>Home</div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />