---
# System prepended metadata

title: Nuxt.js & Vue 學習共筆 - Artifact Dev Team

---

# Nuxt.js & Vue 學習共筆 - Artifact Dev Team

## 團隊雲端硬碟
Adobe XD: 
https://drive.google.com/drive/u/1/folders/1zo-SHRBlYc1FfO_pkANhKLF7CL0sSRAc

一定要接API圖片檔案：https://drive.google.com/drive/u/1/folders/1WoT73th1CRrTSrfCpqY1m82AsyBn5j-B

## 相關學習資源

### Nuxt.js
* Nuxtjs 超入門: https://stephenlaichaowen.medium.com/nuxtjs-%E8%B6%85%E5%85%A5%E9%96%80-762d17f7302b
* SSR — Nuxt.js 超入門: https://medium.com/@jackercleaninglab/ssr-nuxt-js-%E8%B6%85%E5%85%A5%E9%96%80-84a0823b45ed
* 官方文件，可查看內部此頁的三個連結：https://nuxtjs.org/docs/get-started/conclusion

### Vue
* Vue.js教學電子書: https://book.vue.tw/CH1/1-1-introduction.html

### BootstrapVue
* https://bootstrap-vue.org/
* 疑問
    * 有些component跟bootstrap官網的不太一樣 -> 尚未測試

## Nuxt.js 筆記
### 重點學習方向
* SSR - Server Side Render
    * 好處
        * 實現在伺服器先Render好畫面，在顯示給用戶
        * SEO優化
            * 可放meta標籤
            * 搜尋引擎爬蟲才看得到頁面
            * 網頁載入速度更快
    * Nuxt上相關屬性
        * asyncData()
        * fetch()


## 進度規劃

* 3/7 ~ 3/11
    * 切版
        * 首頁
        * About TAMIS
        * News
        * 相關頁面
    * API
* 3/14 ~ 3/18
    * 切版
        * 會員專區
        * 會員登入
        * 活動資訊
    * API
        * 首頁
        * About TAMIS
* 3/21 ~ 3/25
    * 切版
    * API
        * News
        * 相關頁面
        * 活動資訊
        * 會員專區
        * 會員登入

## 參考文案
https://tamis.org.tw/

## 疑問
* 畫面連結不太清楚
    * 學會公告 -> 放第二曾MEnu
    * 學術活動 -> 不用馬上搞，活動要可以建立就好，月曆套套件
* RWD需要嗎？沒有設計圖
    * 我們標出有問題的地方給他 
* 要求 API 文件、Code
    * 他會給我們code
* 前端連結架構
    * 先按照原網站寫，沒有可參考的就我們自己定義


## 設計稿疑問

* 首頁側邊欄，有不明樣式
![](https://i.imgur.com/emtmrHK.png)

* 不確定跳轉後的樣式會是什麼
![](https://i.imgur.com/Q34urdh.png)

* more 按下後的行為？？
![](https://i.imgur.com/oxQUKhP.png)



* XD設計圖的字體會missing fonts

* 中英文轉換

* RWD不清楚
![](https://i.imgur.com/DX4d9Br.png)
![](https://i.imgur.com/foP7Prp.png)
這個部分我們的想法是可以兩個合成一個menu(但怕太長)
不然會有兩個menu覺得在使用者體驗上面不佳
![](https://i.imgur.com/nkzsaZA.png)
這邊的 年會專區 是 會員專區嗎

* 左邊框框是圖片嗎還是方塊而已
![](https://i.imgur.com/f24YlSS.png)

* 活動消息跟醫學新知都跟公告消息長得一樣嗎
![](https://i.imgur.com/LqopuGf.png)

* 第二行的會員入會沒有設計圖
![](https://i.imgur.com/KSg5vN5.png)

* 1.會員積分跟會員搜尋 以及 2.會員積分裡的 會員積分和自填積分 不知道要從哪裡點進去
![](https://i.imgur.com/ZRoOnNb.png)
![](https://i.imgur.com/Nyl7chO.png)


* 活動花絮這2頁的差異
![](https://i.imgur.com/t9PtzZ2.png)
![](https://i.imgur.com/e9b6rR8.png)


* 學術活動有些未提及的功能
![](https://i.imgur.com/h3AbtK7.png)
![](https://i.imgur.com/KkeqhEo.png)

* 這部分沒有設計圖跟連結
![](https://i.imgur.com/nJCsDw2.png)

* 這部分more不知道要連到哪裡
![](https://i.imgur.com/Cp3Jimh.png)

