Antdv+Asp.net WebApi开发学生信息管理系统（一）

npm i --save ant-design-vue

import { createApp } from 'vue'import App from './App.vue'import router from './router'//1. 引入Antdv组件和样式import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';const app = createApp(App);app.use(router).use(Antd).mount('#app')

const {    defineConfig} = require('@vue/cli-service')module.exports = defineConfig({    css: {        loaderOptions: {            less: {                lessOptions: {                    modifyVars: {                        'primary-color': '#1DA57A',                        'link-color': '#1DA57A',                        'border-radius-base': '2px',                    },                    javascriptEnabled: true,                },            },        },    },    chainWebpack: config => {        config        .plugin('html')        .tap(args => {            args[0].title = 'SIMS'            return args        })    },    transpileDependencies: true})

<template>  <div id="app">    <router-view></router-view>  </div></template><style></style>

<template>    <div id="layout">        <a-layout>            <a-layout-header>Header</a-layout-header>            <a-layout>                <a-layout-sider>Sider</a-layout-sider>                <a-layout-content>Content</a-layout-content>            </a-layout>            <a-layout-footer>Footer</a-layout-footer>        </a-layout>    </div></template>
<script>    export default {        name: 'App',        components: {
        }    }</script>
<style>    #app{        height: inherit;    }    #layout{        height: inherit;    }    .ant-layout{        height: inherit;    }    #layout .code-box-demo {        text-align: center;    }
    #layout .ant-layout-header,    #layout .ant-layout-footer {        color: #fff;        background: #7dbcea;    }
    [data-theme='dark'] #layout .ant-layout-header {        background: #6aa0c7;    }
    [data-theme='dark'] #layout .ant-layout-footer {        background: #6aa0c7;    }
    #layout .ant-layout-footer {        line-height: 1.5;    }
    #layout .ant-layout-sider {        color: #fff;        line-height: 120px;        background: #3ba0e9;    }
    [data-theme='dark'] #layout .ant-layout-sider {        background: #3499ec;    }
    #layout .ant-layout-content {        min-height: 120px;        color: #fff;        line-height: 120px;        background: rgba(16, 142, 233, 1);    }
    [data-theme='dark'] #layout .ant-layout-content {        background: #107bcb;    }
    #layout>.code-box-demo>.ant-layout+.ant-layout {        margin-top: 48px;    }</style>

<a-layout-sider v-model:collapsed="collapsed">    <a-button type="primary" style="margin-bottom: 5px" @click="toggleCollapsed">        <MenuUnfoldOutlined v-if="collapsed" />        <MenuFoldOutlined v-else />    </a-button>    <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" :inline-collapsed="collapsed">        <a-menu-item key="1">            <template #icon><HomeOutlined /></template>            <router-link to="/main">首页</router-link>        </a-menu-item>        <a-sub-menu key="sub1">            <template #icon>                <ReadOutlined />            </template>            <template #title>                <span class="onemenu">学生管理</span>            </template>            <a-menu-item key="5">                <img src="../assets/icon_student.png" class="icon" />                <router-link to="/student">学生管理</router-link>            </a-menu-item>            <a-menu-item key="6">                <img src="../assets/icon_classes.png" class="icon" />                <router-link to="/classes">班级管理</router-link>            </a-menu-item>            <a-menu-item key="7">                <img src="../assets/icon_course.png" class="icon" />                <router-link to="/course">课程管理</router-link>                </a-menu-item>            <a-menu-item key="8">                <img src="../assets/icon_score.png" class="icon" />                <router-link to="score">成绩管理</router-link>                </a-menu-item>        </a-sub-menu>        <a-sub-menu key="sub2">            <template #icon>                <AppstoreOutlined />            </template>            <template #title>                <span class="onemenu">系统管理</span>            </template>            <a-menu-item key="9">                <img src="../assets/icon_personal.png" class="icon" />                <router-link to="/personal">个人信息</router-link>                </a-menu-item>            <a-menu-item key="10">                <img src="../assets/icon_user.png" class="icon" />                <router-link to="/user">用户管理</router-link>                </a-menu-item>            <a-menu-item key="11">                <img src="../assets/icon_role.png" class="icon" />                <router-link to="/role">角色管理</router-link>                </a-menu-item>        </a-sub-menu>    </a-menu></a-layout-sider>

<a-layout-content>    <router-view></router-view></a-layout-content>
添加菜单对应的视图