使用vue3创建项目

1.创建项目

npm create vite@latest edu-vue –- --template vue

2.安装antd

npm install ant-design-vue

3.安装路由

npm install vue-router

4.新建路由

在src/router下新建index.js文件

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '../layout/Layout.vue'

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('../views/Home.vue')
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
      },
      {
        path: '/course',
        name: 'Course',
        component: () => import('../views/Course.vue')
      },
      {
        path: '/question',
        name: 'Question',
        component: () => import('../views/Question.vue')
      },
      {
        path: '/article',
        name: 'Article',
        component: () => import('../views/Article.vue')
      },
      {
        path: '/live',
        name: 'Live',
        component: () => import('../views/Live.vue')
      }
    ]
  },


]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

5.新建菜单页

在src/layout下新建Layout.vue文件

<template>
<a-layout >
  <a-layout-header class="header">
    <a-menu mode="horizontal" theme="light" :selected-keys="[current]" @click="handleClick" class="menu">
      <a-menu-item key="home">首页</a-menu-item>
      <a-menu-item key="about">关于我们</a-menu-item>
      <a-sub-menu key="course" title="课程">
        <a-menu-item key="course">课程1</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="question" title="问答">
        <a-menu-item key="question">问答1</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="article" title="文章">
        <a-menu-item key="article">文章1</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="live" title="直播">
        <a-menu-item key="live">直播1</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-header>
  <a-layout-content >
    <!-- 当前组件的子路由在这里展示 -->
    <router-view /> 
  </a-layout-content>
</a-layout>
</template>

<script>
export default {
  data() {
    return {
      current: "home",
    };
  },
  methods: {
    handleClick(e) {
      this.current = e.key;
      console.log("current:",this.current);
      this.$router.push(this.current);
    },
  },
  mounted() {
    this.$router.push('/home')
  }
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  background-color: white;
}

.menu {
  flex-grow: 1;
}
</style>

6.注册组件

在main.js文件中注册router和antd

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import "ant-design-vue/dist/antd.css"

createApp(App).use(router).use(Antd).mount('#app')

7.渲染组件

配置App.vue

<template>
  <div id="app">
    <!-- 顶级路由在这里展示 -->
    <router-view />
  </div>
</template>

8.创建组件

在src/view下面分别创建About.vue,Course.vue,Question.vue,Article.vue,Live.vue,格式如下

<template>
  <div>
    <p>关于</p>
    <img src="../assets/about.png" alt="" class="center">
  </div>
</template>

<script>
</script>

<style scoped>
.center{
  display: block;
  margin: auto;
}
</style>