前言
在學程式的過程中發現到寫日記非常的有幫助,所以開了一個頁面用來裝這兩周的日記。
模板
## 2021.12.
### 今天要做的事
### 中場紀錄
### 一日總結
日記
2021.12.21
今天主要學習了理財知識、Vue 基本的 API 以及基礎的 Tailwind。
1. Vue:
今天學了很多 API, inject、 provide、 dynamic component、v-model with component、mixins、ref、composition component、vue lifecycle。基本上,最基礎的 API 都已經摸過一遍了。整體來說,使用起來沒什麼問題,這幾天想寫幾個小 app 來熟習這些 api 的使用。
老實講,我覺得比起 React,Vue 的學習取線似乎更高,時不時就要去查一下 API 文件,看看 Vue 專有的 syntax 是甚麼,不像 React 可以直接用 JS 寫。再來,vue 的 structure 有時候也會讓我有點混亂感,照我現在這樣的寫法,以後維護上會有問題,等到熟悉之後,再來研究如何讓 vue 有結構一點吧 !
2. Tailwind
一個類似愈 Bootstrap 的 css 庫,不一樣的是,比起提供 UI 元件的寫法,他更像提供一個已經寫好的 css 資料庫。
使用 Tailwind 的好處在於更好規範專案中各個尺寸、顏色,我們也不需要再花時間為一些很功能性的 class 取名子。另外 Tailwind 的 class 都是可以重複使用的,可以有效減少 css 膨脹的狀況。
3. 理財知識
我是超級菜雞,所以選了一本很入門的書,寫了書摘在 medium。
2021.12.22
今天要做的事:
- 用 Vue 開發一個簡易的文章瀏覽 App,主要是用來練習前幾天學到的技術。
- 試看看用 Tailwind
- postcss 初探
中場紀錄:
早上成功用 vue 開發了一個簡單的文章瀏覽 App,不用 route 的方式創造了分頁的效果,並且使用了 Pagination,狀況算是蠻讓人滿意的。接下來下午的工作大概長這樣:
- 幫 vue App 加上 skeleton loading 的效果 + 學習基本的 css animation
- 初探 Tailwind
一日總結:
Vue 專案
今天用 Vue 完成了一個文章閱讀列表的小專案,運用了 pagination、skeleton loading、turn page without router 這些功能。這些功能其實都已經有寫好的模組了,之所以沒有使用是因為想要利用這個機會熟悉 Vue。在完成今天這些任務之後,接下來的主要任務是:
- 研究怎麼讓 Vue 更好維護,現在寫出來的程式碼長得很亂。但也有可能跟自己不這麼熟悉 Vue 有關。
- 將 PostCss、TailWind 融入這個專案,以後工作需要。
tailswind
剛剛稍微摸了一下 tailswind,目前還不太熟悉環境設定,所以有些問題,而最大的問題是每次寫完新的 class 上去 html,似乎都要重新跑一次 build 才能顯現在頁面上。
這個行為跟我預想的不一樣,首先我看的教學與文章,似乎都沒有這個步驟,再來,我原本在腦中預設 postcss 的運作模式是:
拉 Libary 下來 > HTML 檔案可以 access 這些 class > 直接適用
但目前來看似非如此,明天再研究吧 !
明日目標:
- 研究 rem 的使用
- 研究 media query
- Postcss tailswind