正式上工前的學習日記們


Posted by Powerfultraveling 's Blog on 2021-12-21

前言

在學程式的過程中發現到寫日記非常的有幫助,所以開了一個頁面用來裝這兩周的日記。

模板

## 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

今天要做的事:

  1. 用 Vue 開發一個簡易的文章瀏覽 App,主要是用來練習前幾天學到的技術。
  2. 試看看用 Tailwind
  3. postcss 初探

中場紀錄:

早上成功用 vue 開發了一個簡單的文章瀏覽 App,不用 route 的方式創造了分頁的效果,並且使用了 Pagination,狀況算是蠻讓人滿意的。接下來下午的工作大概長這樣:

  1. 幫 vue App 加上 skeleton loading 的效果 + 學習基本的 css animation
  2. 初探 Tailwind

一日總結:

Vue 專案

今天用 Vue 完成了一個文章閱讀列表的小專案,運用了 pagination、skeleton loading、turn page without router 這些功能。這些功能其實都已經有寫好的模組了,之所以沒有使用是因為想要利用這個機會熟悉 Vue。在完成今天這些任務之後,接下來的主要任務是:

  1. 研究怎麼讓 Vue 更好維護,現在寫出來的程式碼長得很亂。但也有可能跟自己不這麼熟悉 Vue 有關。
  2. 將 PostCss、TailWind 融入這個專案,以後工作需要。
tailswind

剛剛稍微摸了一下 tailswind,目前還不太熟悉環境設定,所以有些問題,而最大的問題是每次寫完新的 class 上去 html,似乎都要重新跑一次 build 才能顯現在頁面上。

這個行為跟我預想的不一樣,首先我看的教學與文章,似乎都沒有這個步驟,再來,我原本在腦中預設 postcss 的運作模式是:

拉 Libary 下來 > HTML 檔案可以 access 這些 class > 直接適用

但目前來看似非如此,明天再研究吧 !

明日目標:

  1. 研究 rem 的使用
  2. 研究 media query
  3. Postcss tailswind









Related Posts

發生在 GitHub conflict 的衝突——無法發 PR 合併分支

發生在 GitHub conflict 的衝突——無法發 PR 合併分支

Day01 Transfer Learning 遷移式學習

Day01 Transfer Learning 遷移式學習

D32_W3 作業確認 + W4 NET101

D32_W3 作業確認 + W4 NET101


Comments