2022 前端常用的套件與工具

nvm

NVM 是 Node Version Manager 的縮寫，主要功能就可以快速切換 Node.js 版本。

使用場景：

1. 維護多個不同時期所開發專案
2. 編譯老舊專案

Linux / MacOS 安裝方式

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

在終端機設定檔 bash 環境下編輯 ~/.bashrc 或 zsh 環境下編輯 ~/.zshrc

在文件內加入以下設定：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

然後執行下面指令

• bash：source ~/.bashrc
• zsh: source ~/.zshrc

yarn

是 Facebook 所開發的前端工具，是 Node.js 的套件管理，算是 npm 的替代品，優點是速度較快。

安裝方式：

使用 npm 安裝

npm install -g yarn

MacOS安裝

brew install yarn

Ubuntu安裝

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -  

sudo apt-get update && sudo apt-get install yarn 

Nuxt.js

是一個混合式 Vue 框架，支援 服務器渲染(SSR)、生成靜態頁面或是單頁應用程式(SPA)，並優化了SEO，也支援 TypeScript。

官網：https://nuxtjs.org/

tailwindcss

是一個近期相當流行的 Utility Framework，也是我近期最用的 UI 構建工具，其特色包含：

1. 快速上手
2. 快速建置
3. 高度客製化

因為以上特色，真得讓人一用就愛上了。

官網：https://tailwindcss.com/

Bootstrap

相當知名且老牌的 UI component Framework，可以快速透過各種組件的組合建立 Web App，不過其實近期的專案，我已很少用到 Bootstrap 了。

官網：https://getbootstrap.com/

element UI

這是我也滿喜歡的一個 UI component Framework，相對於 Bootstrap 它的組件更加豐富，特別適合拿來做管理介面。

官網：https://element.eleme.io/

Moment.js

是一個專門處理日期與時間的Library，功能包含了：

1. 日期時間格式化
2. 日期時間相減運算
3. 相對時間時間
4. 時區轉換
5. 支持多語系

官網：https://momentjs.com/

對於日期時間的處理，Moment.js 幾乎都可以滿足

Lodash

在用 javascript 做資料處理，Lodash 可以幫我們省去很多時間。

官網：https://lodash.com/

Apache ECharts

這是一個開源的繪圖工具，當做數據分析時，需要圖表統計時，ECharts 是不錯的選擇

官網：https://echarts.apache.org/