React Search Photo Demo
本次練習要在 Vite 上使用 React，並實作一個搜尋表單，輸入文字並透過 Unsplash API 來搜尋並顯示圖片。
前置作業使用 Vite 建立專案，並使用 Semantic UI 的 CDN 來做基本的美化：
Vite 建立專案 react-form-demo
123$ yarn create @vitejs/app react-form-demo --template react$ cd react-form-demo$ yarn
在 index.html 貼上 Semantic UI CDN Link
1https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
完成基本介面
12345678910111213// App.jsximport React from 'react'import SearchBar from './components/SearchBar'function App() { retur ...
使用 useEffect 來掌管元件作用
可以取代 Class Component 的神兵利器之一，無疑是 useState 還有本篇介紹的 useEffect。
useEffect 基本運作的機制在 Class Component 中，有著生命週期的 API，生命週期代表著一個元件從誕生到結束，在 Vue 也有相似的概念，每個階段有不同的 API 可以操作。
為了測試 useEffect 如何在元件中運作，下方寫了一個範例：
12345678910111213141516171819import React, { useState, useEffect } from 'react'export default function App() { console.log('first'); const [msg, setMsg] = useState('default'); useEffect(() => { console.log('useEffect'); }); ret ...
Tailwind 安裝 React 篇
最近幾年火速竄紅的 CSS 框架 Tailwind 也是蠻多前端工程師開始使用，於是就有了本篇跟風仔的安裝篇XD
環境版本介紹本篇使用的是 Create-React-App 來建立環境，並且將會透過 NPM 來安裝 Tailwind。
React 版本：17.0.2
Node.js 版本：14.16 （官方建議版本12.13或以上）
Tailwind 版本：2.1.4
安裝流程
請在終端機輸入： $ npx create-react-app 專案名稱，安裝完後再 $ cd 進入專案資料夾中。
接著就要開始安裝 Tailwind 了，請輸入：
$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
這時候碰到一個問題，我的終端機跳出一個訊息：no matches found: postcss@^7
上網查了一下解法，如果跟我一樣遇到這個問題的話，請輸入：
$ npm install -D tailwindcss@npm:@tailwindcss/postc ...
Ruby 的邏輯判斷與流程控制
本篇文章將會提到 Ruby 該如何使用判斷式。
If在 JavaScript 中，如果要做判斷式的話，會這樣做：
123456let num = 10;if (num !== 5) { console.log('false');}// 結果會印出 false
而在 Ruby 中，也是差不多的作法：
123456num = 10if num != 5 puts 'false'end# 結果會印出 false
不過 Ruby 倒是提供了不一樣的寫法：
if not這個用法感覺起來比較像英文的寫法，上面的例子如果用 if not 來表示的話，就會是：
123456num = 10if not num == 5 puts 'false'end# 結果會印出 false
if 倒裝句這個寫法就更像英文了，如果寫起來就像是英文的倒裝句一樣，但是這個的用法只限一行的程式碼使用：
1234num = 10puts 'false' if not num == 5# 結果會印出 false
...
Ruby 的變數與常數使用
聽說 Ruby 的常數跟別的程式語言不一樣？本篇就來看看 Ruby 的變數與常數該怎麼使用。
變數的宣告與使用Ruby 的變數宣告非常簡單，只要在變數的後面加上等號跟值就宣告成功了，就像這樣：
12my_name = 'Bucky'num = 10
也可以一次宣告多個變數：
1x, y, z = 10, 4, 6
而且字串跟數字的使用也是非常靈活，例如：
123456789101112last_name = 'Bucky'first_name = 'Chu'age = 20girls_name = 'Patty'girls_age = 18puts "My name is #{last_name} #{first_name}, I'm #{age} years old."puts "My age bigest than #{girls_name} #{age - girl ...
Ruby[0] - 從安裝環境到 Hello World
前端玩久了，最近想接觸一下後端看看。但是後端語言這麼多，改選哪種呢？最後我選了 Ruby，她的語法看起來很有趣，而且平常工作上用不到，這樣才有想玩的動力吧XD
Ruby 環境安裝首先從安裝環境開始。可以直接從官網下載，或是使用 RVM 來管理並下載任何版本，本篇文章介紹的是使用後者的方法。
（本篇文章是用 Mac 環境安裝）
什麼是 RVM？RVM 是一種 Ruby 的版本管理套件，它可以讓使用者根據不同需求來安裝不同的版本使用。
相關介紹可以在 RVM 網站可以看到更多。
開始安裝 RVM
在 Terminal 輸入：
1$ \curl -sSL https://get.rvm.io | bash -s stable
接著確認有無安裝成功，輸入：
1$ rvm -v // 有顯示版本就代表安裝成功
開始安裝 Ruby
看看目前有哪些版本提供安裝：
1$ rvm ls known
接著輸入想要安裝的版本，例如 3.0：
1$ rvm install 3.0
確認有無安裝成功：
1$ ruby -v // 有顯示版本就代表安裝成功
Ruby 的 He ...
Vuex 中的 Computed 用法 - Getters
在公司專案中，有多筆資料是從 actions 的回傳結果再透過 mutations 來更改資料狀態。這時候想要透過 computed 來處理這些資料，但是還要再把資料傳入 components 中再做處理，感覺總是沒那麼即時，如果在 Vuex 裡面也可以做 computed 就好了…咦？還真的有嗎！？太方便了吧！
需求我的資料有複數筆陣列，結構如下示範：
123const list_one = ['A001', 'A002', 'A003', 'A004'],const list_two = ['B001', 'B002', 'B003'],const list_three = ['C001', 'C002', 'C003', 'C004', 'C005']
我的需要是將複數筆陣列的資料給合併成一個陣列，然後再去做資料處理。
Getters 的 ...
開始我的 Vue 3
Vue 3 正式版問世也一段時間了，也是時候來認識一下新朋友了，前端就是要不停地追技術啊0.0
前言自從 Vue 3 的消息不斷傳出，相信主力開發工具為 Vue 的前端工程師也多少都有耳聞，小弟我也不例外，常常會跟朋友討論相關訊息。而當正式版（代號：one piece）發布之後，全世界前端大概都開始了尋找大秘寶之旅。
雖然公司目前專案大概也還不到使用 Vue 3 的時機，但是多了解新技術總是不會錯。剛好 Vue.js Taiwan 的主辦人 - Kuro 大大，在過年前出了一本 Vue 3 的書 - 重新認識 Vue.js：008天絕對看不完的 Vue.js 3 指南，想趁著過年期間來學一下，本系列就是紀錄我學習 Vue 3 的歷程，那麼就開始吧！
安裝
如果想要小試一下的話，可以使用 CDN 的方式來掛載，只要加上：
1<script src="https://unpkg.com/vue@next"></script>
有經驗的開發者想透過 Vue-CLI 的話：
12$ npm install -g @vue/cli$ vue cr ...
圖片剪裁套件的使用 - Vue-Cropper
Vue Cropper 這個套件使用起來非常方便，而且剛好符合我的需求，只需要看著文件設置一些設定就可以做出變化了。
前言當主管告知需要在後台將前台的圖片做剪裁修改後，並且能夠即時預覽結果，最後再將圖片存成新檔案。找了一下有沒有前人造的輪子，發現還真的有，所以設置了一下後就可以達到我要的效果了。
Vue Cropper
安裝
123npm install vue-cropperyarn add vue-cropper
在 component 裡使用
12345import { VueCropper } from "vue-cropper";components: { VueCropper,},
data 跟 methods 的設定：
1234567891011121314151617181920212223242526272829303132data() { return { modelSrc: "", option: { img ...
讓 Vue 每次換頁都能在最上方的方法
在 Vue 開發的 SPA 上，每次換頁總是會有一個問題，那就是換到其他頁面，畫面總是不會在最頂端，而是在上一頁的位置，這個問題以前覺得還好，但客戶要求修正這個問題，那就來修正吧！
問題點以我所做的 side project 來說，假設當我按下認識桌遊後，接著會跳到認識桌遊的頁面，在一般的網站理所當然的會刷新然後會顯示在最頂端並且讓使用者可以從上往下看。
但是在 Vue 開發的 SPA 中，則是會顯示上一個頁面的位置，那麼接著就來說說該如何解決這個問題。
解決方法找了一下關鍵字，就找到了解法，只要使用 afterEach 這個 hook 就解決了。
在 main.js 加入
123router.afterEach((to, from, next) => { window.scrollTo(0, 0);});
這樣就結束了，好輕鬆啊～～
參考來源
https://blog.csdn.net/weixin_40881970/article/details/102912283
