《Asp.Net Core3 + Vue3入坑教程》 - Vue 2.使用Ant Design of Vue编写页面 & vue-router 初试

《Asp.Net Core3 + Vue3入坑教程》 此教程适合新手入门或者前后端分离尝试者。可以根据图文一步一步进操作编码也可以选择直接查看源码。每一篇文章都有对应的源码

目录 《Asp.Net Core3 + Vue3入坑教程》系列教程目录

Asp.Net Core后端项目

后端项目搭建与Swagger配置步骤

配置CROS策略解决跨域问题

AutoMapper & Restful API & DI

EF Core & Postgresql

.Net Core 3升级成 .Net 5 & JWT

（推荐）异常处理与UserFriendlyException

...

Vue3 前端项目

使用vue-cli创建vue项目

（本文）使用Ant Design of Vue编写页面 & vue-router 初试

（暂未发表敬请期待...）将Antd导航菜单与vue-router绑定

（暂未发表敬请期待...） 保存用户登入状态vuex初试

本文简介

本文为《Asp.Net Core3 + Vue3入坑教程》系列教程的前端第二篇 - 使用Ant Design of Vue编写页面 & vue-router 初试。本文接着上文《使用vue-cli创建vue项目》新建的simple-vue的基础上将使用Ant Design of Vue创建简单页面，并结合vue-router实现页面之间的简单跳转，具体效果如下：

Ant Design of Vue 官方文档 https://2x.antdv.com/docs/vue/getting-started-cn

安装Vetur插件

Vetur插件简介 https://marketplace.visualstudio.com/items?itemName=octref.vetur

引入ant-design-vue依赖

在终端执行命令：

yarn add ant-design-vue@next

调整main.js将ant-design-vue全局引入

代码如下：

import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; createApp(App).use(Antd).mount('#app') 在 components 文件夹下新建文件 Home.vue

从官网复制的 https://www.antdv.com/components/layout-cn/

代码如下：

<template> <a-layout> <a-layout-sider v-model:collapsed="collapsed" collapsible> <div /> <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline"> <a-menu-item key="1"> <pie-chart-outlined /> <span>Option 1</span> </a-menu-item> <a-menu-item key="2"> <desktop-outlined /> <span>Option 2</span> </a-menu-item> <a-sub-menu key="sub1"> <template #title> <span> <user-outlined /> <span>User</span> </span> </template> <a-menu-item key="3">Tom</a-menu-item> <a-menu-item key="4">Bill</a-menu-item> <a-menu-item key="5">Alex</a-menu-item> </a-sub-menu> <a-sub-menu key="sub2"> <template #title> <span> <team-outlined /> <span>Team</span> </span> </template> <a-menu-item key="6">Team 1</a-menu-item> <a-menu-item key="8">Team 2</a-menu-item> </a-sub-menu> <a-menu-item key="9"> <file-outlined /> <span>File</span> </a-menu-item> </a-menu> </a-layout-sider> <a-layout> <a-layout-header /> <a-layout-content> <a-breadcrumb> <a-breadcrumb-item>User</a-breadcrumb-item> <a-breadcrumb-item>Bill</a-breadcrumb-item> </a-breadcrumb> <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"> Bill is a cat. </div> </a-layout-content> <a-layout-footer> Ant Design ©2018 Created by Ant UED </a-layout-footer> </a-layout> </a-layout> </template> <script> import { PieChartOutlined, DesktopOutlined, UserOutlined, TeamOutlined, FileOutlined, } from '@ant-design/icons-vue'; import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'Home', components: { PieChartOutlined, DesktopOutlined, UserOutlined, TeamOutlined, FileOutlined, }, data() { return { collapsed: ref(false), selectedKeys: ref(['1']), }; }, }); </script> <style> #components-layout-demo-side .logo { height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.3); } .site-layout .site-layout-background { background: #fff; } [data-theme='dark'] .site-layout .site-layout-background { background: #141414; } </style> 在 components 文件夹下新建文件 Login.vue