init

src/App.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
+<style>
+
+</style>

src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/layout/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <div class="top">
+            <a-menu mode="horizontal" @click="navto">
+                <a-menu-item key="/index">
+                    <template #icon>
+                        <mail-outlined />
+                    </template>
+                    高考咨询
+                </a-menu-item>
+                <a-menu-item key="/major">
+                    <template #icon>
+                        <FileSearchOutlined />
+                    </template>
+                    查专业
+                </a-menu-item>
+                <a-menu-item key="/university">
+                    <template #icon>
+                        <AuditOutlined />>
+                    </template>
+                    找大学
+                </a-menu-item>
+                <a-menu-item key="/fillout">
+                    <template #icon>
+                        <EditOutlined />
+                    </template>
+                    志愿填报
+                </a-menu-item>
+            </a-menu>
+        </div>
+
+        <router-view></router-view>
+    </div>
+</template>
+<style lang="scss" scoped>
+.top {
+    position: sticky;
+    z-index: 999;
+    top: 0;
+}
+</style>
+<script setup lang="ts">
+import { MailOutlined, FileSearchOutlined, AuditOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter()
+
+function navto({ key }: { key: string }) {
+    console.log(key)
+    router.push({ path: key })
+}
+</script>

src/main.ts

@@ -0,0 +1,19 @@
+import App from './App.vue'
+import "normalize.css"
+import { createApp } from 'vue'
+import { createRouter,createWebHashHistory, RouteRecordRaw } from "vue-router"
+const routes:RouteRecordRaw[] = [{
+    path:"/",
+    component:() => import('./layout/index.vue'),
+    children:[{
+      path: "index",
+      component: () => import("./pages/index.vue")
+    }]
+
+}]
+const router = createRouter({
+    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
+    history: createWebHashHistory(),
+    routes, // `routes: routes` 的缩写
+  })
+createApp(App).use(router).mount('#app')

src/pages/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <a-list
+            item-layout="vertical"
+            size="large"
+            :pagination="pagination"
+            :data-source="listData"
+        >
+           
+            <template #renderItem="{ item }">
+                <a-list-item key="item.title">
+                    <template #actions>
+                        <span v-for="{ type, text } in actions" :key="type">
+                            <component :is="type" style="margin-right: 8px" />
+                            {{ text }}
+                        </span>
+                    </template>
+                    <template #extra>
+                        <img
+                            width="272"
+                            alt="logo"
+                            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
+                        />
+                    </template>
+                    <a-list-item-meta :description="item.description">
+                        <template #title>
+                            <a :href="item.href">{{ item.title }}</a>
+                        </template>
+                        <template #avatar>
+                            <a-avatar :src="item.avatar" />
+                        </template>
+                    </a-list-item-meta>
+                    {{ item.content }}
+                </a-list-item>
+            </template>
+        </a-list>
+    </div>
+</template>
+<style lang="scss" scoped>
+</style>
+<script setup lang="ts">
+import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
+
+const listData: Record<string, string>[] = [];
+
+for (let i = 0; i < 23; i++) {
+    listData.push({
+        href: 'https://www.antdv.com/',
+        title: `ant design vue part ${i}`,
+        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+        description:
+            'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+        content:
+            'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+    });
+}
+const pagination = {
+    onChange: (page: number) => {
+        console.log(page);
+    },
+    pageSize: 10,
+};
+const actions: Record<string, string>[] = [
+    { type: 'StarOutlined', text: '156' },
+    { type: 'LikeOutlined', text: '156' },
+    { type: 'MessageOutlined', text: '2' },
+];
+</script>

src/pages/major.vue

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