---

theme: vue-pro highlight: a11y-dark

---

嗨！~ 大家好，我是YK菌 🐷 ，一個微系前端 ✨，愛思考，愛總結，愛記錄，愛分享 🏹，歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012，微信公眾號：ykyk2012]

「這是我參與11月更文挑戰的第27天，活動詳情檢視：2021最後一次更文挑戰」

今天我們來用Vue做第三個小demo，一個Github使用者搜尋的小案例，之前我們用React也做過，這次用Vue做一次，使用axios來發起網路請求。

0. 使用Vue-cli配置代理

方法①

在vue.config.js中新增如下配置：

javascript devServer:{ proxy:"http://localhost:5000" }

說明：

1. 優點：配置簡單，請求資源時直接發給前端（8080）即可。
2. 缺點：不能配置多個代理，不能靈活的控制請求是否走代理。
3. 工作方式：若按照上述配置代理，當請求了前端不存在的資源時，那麼該請求會轉發給伺服器 （優先匹配前端資源）

方法②

編寫vue.config.js配置具體代理規則：

javascript module.exports = { devServer: { proxy: { '/api1': {// 匹配所有以 '/api1'開頭的請求路徑 target: 'http://localhost:5000',// 代理目標的基礎路徑 changeOrigin: true, pathRewrite: {'^/api1': ''} }, '/api2': {// 匹配所有以 '/api2'開頭的請求路徑 target: 'http://localhost:5001',// 代理目標的基礎路徑 changeOrigin: true, pathRewrite: {'^/api2': ''} } } } } /* changeOrigin設定為true時，伺服器收到的請求頭中的host為：localhost:5000 changeOrigin設定為false時，伺服器收到的請求頭中的host為：localhost:8080 changeOrigin預設值為true */

說明：

1. 優點：可以配置多個代理，且可以靈活的控制請求是否走代理。
2. 缺點：配置略微繁瑣，請求資源時必須加字首。

1. 準備工作

介面拆分

2. 靜態頁面

index.html

```html

```

App.vue

```html

```

Search.vue

```html

```

Main.vue

```html

```

3. 初始化顯示

main.vue

```html

```

4. 互動功能實現

輸入關鍵字點選搜尋，介面發生變化

這裡我們使用釋出訂閱的庫 pubsub-js

Search.vue

```html

```

Main.vue

```html

```

5. 效果展示

最後可以看下我們的效果

最後，歡迎關注我的專欄，和YK菌做好朋友