---
# System prepended metadata

title: 前端所需環境

---

前端所需環境
===

執行環境
---
* node: 20.10.0
* npm: 10.2.3

開發語言
---
* script: typescript
* style: scss
* html: pug

框架
---
* [vue@^3.4.0](https://www.npmjs.com/package/vue)

開發及打包環境
---
* [vite@^5.1.0](https://www.npmjs.com/package/vite)

測試相關環境
---
* [vitest@^1.4.0 - 測試環境](https://www.npmjs.com/package/vitest)
* [@vitest/coverage-c8@latest - 覆蓋率](https://www.npmjs.com/package/@vitest/coverage-v8)


相關常用套件
---
* WebSocket
    * [socket.io@latest]([https:/](https://www.npmjs.com/package/ws)/)
    * [@microsoft/signalr@latest](https://www.npmjs.com/package/@microsoft/signalr)
    * websocket - 原生

* API介接
    * [axios@latest](https://www.npmjs.com/package/axios)
    * fetch - 原生

* 前端元件相關
    * [bootstrap@^5.3.0](https://www.npmjs.com/package/bootstrap)

* 相關套件
    * [exceljs - 產生excel](https://www.npmjs.com/package/exceljs)
    * [cleave.js@latest - 字串中加入連接符號](https://www.npmjs.com/package/cleave.js)
    * [crypto-js@latest - 加解密套件](https://www.npmjs.com/package/crypto-js)
    * [lodash@latest - 實用函數](https://www.npmjs.com/package/lodash)
    * [moment@latest - 時間處理相關](https://www.npmjs.com/package/moment)
    * [qrcode@latest - 產生qrcode圖片](https://www.npmjs.com/package/qrcode)
    * [jsdom@latest - 動態加載JS庫](https://www.npmjs.com/package/jsdom)
    * [jsbarcode@latest - 產生barcode圖片](https://www.npmjs.com/package/jsbarcode)
    * [uuid@latest - 產生uuid函數庫](https://www.npmjs.com/package/uuid)
    * [sweetalert2@latest - 提示視窗](https://www.npmjs.com/package/sweetalert2)