《Asp.Net Core3 + Vue3入坑教程》 - Vue 2.使用Ant Design of Vue編寫頁面 & vue-router 初試
阿新 • • 發佈：2021-03-09
# 簡介
《Asp.Net Core3 + Vue3入坑教程》 此教程適合新手入門或者前後端分離嘗試者。可以根據圖文一步一步進操作編碼也可以選擇直接檢視原始碼。每一篇文章都有對應的原始碼
# 目錄
#### 《Asp.Net Core3 + Vue3入坑教程》系列教程目錄
Asp.Net Core後端專案
1. [後端專案搭建與Swagger配置步驟](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14435589.html)
2. [配置CROS策略解決跨域問題](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14438539.html)
3. [AutoMapper & Restful API & DI](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14438949.html)
4. [EF Core & Postgresql](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14438885.html)
5. [.Net Core 3升級成 .Net 5 & JWT](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14444048.html)
6. [（推薦）異常處理與UserFriendlyException](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14495329.html)
7. ...
Vue3 前端專案
1. [使用vue-cli建立vue專案](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14444396.html)
2. [**（本文）使用Ant Design of Vue編寫頁面 & vue-router 初試**](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14452124.html)
3. [（暫未發表敬請期待...）將Antd導航選單與vue-router繫結](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14489900.html)
4. [（暫未發表敬請期待...） 儲存使用者登入狀態vuex初試](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14494481.html)
# 本文簡介
本文為《Asp.Net Core3 + Vue3入坑教程》系列教程的前端第二篇 - 使用Ant Design of Vue編寫頁面 & vue-router 初試。本文接著[上文《使用vue-cli建立vue專案》](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14444396.html)新建的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/
程式碼如下：
```
```
#### 在 components 資料夾下新建檔案 Login.vue
程式碼如下：
```
```
#### 調整App.Vue
程式碼如下：
```
```
#### 啟動網站
在終端執行命令：
```
yarn serve
```
#### 成功看到效果
#### 接下來我們解決路由問題，讓url開啟指定的頁面
> vue-router 官方文件 https://next.router.vuejs.org/zh/introduction.html
#### 安裝vue-router
在終端執行命令：
```
yarn add vue-router@next
```
#### 調整main.js
程式碼如下：
```
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import 'ant-design-vue/dist/antd.css';
import Home from './components/Home.vue'
import Login from './components/Login.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/login', component: Login },
]
// 建立路由例項並傳遞 `routes` 配置
// 你可以在這裡輸入更多的配置，但我們在這裡
// 暫時保持簡單
const router = createRouter({
// 內部提供了 history 模式的實現。為了簡單起見，我們在這裡使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的縮寫
})
//建立並掛載根例項
//確保 _use_ 路由例項使
//整個應用支援路由。
createApp(App).use(Antd).use(router).mount('#app')
```
#### 修改App.vue
> 這裡的