Vue前端工程師

網路銀行網頁前端開發。 【技術需求】 一、開發環境與專案架構設置 1. 開發環境設定 • 建立並設定本地開發環境：安裝 Node.js、npm (或 yarn)、Vue CLI / Vite 等。 • 設定 .env 檔案或環境變數，確保開發、測試、正式環境可使用不同 API Endpoint 與設定參數。 2. 專案初始化 • 使用 Vue CLI 或 Vite 初始化專案結構，包括： • 安裝必要套件（Vue Router、Pinia / Vuex、Axios 等）。 • 設定語言檔、國際化需求（如需 i18n）。 • 設定 lint 工具（ESLint、Prettier 等）。 • 建立專案基本檔案結構，如 src/components/、src/pages/、src/assets/、src/store/ 等，確保維護性與可讀性。 3. 版本控制與分支策略 • 版本控制建立並遵守分支策略（master/main、develop、feature、release、hotfix 等）。 • 撰寫並維護 .gitignore 檔案，避免不必要檔案進入版本庫（如 node_modules/、打包後檔案、Log 檔等）。 二、功能開發與前端介面實作 1. 版面切版與樣式處理 • 依照設計稿使用 HTML、CSS（或 SASS/SCSS、LESS）進行切版。 • 依照設計指示或元件庫規範，自訂或覆寫元件庫的樣式。 2. UI 元件開發 • 根據設計需求將頁面切割成可重複使用的 Vue Component（如 Header、Footer、Navbar、Card、Modal 等）。 • 實作通用元件，方便全站共用（如按鈕、表單元件、彈窗、提示訊息等），降低程式碼重複。 • 確保可維護性，保持元件程式碼簡潔、易於除錯與擴充。 3. 路由與頁面管理 • 使用 Vue Router 設定前端路由，區分公開頁面與需登入才可存取的頁面。 • 規劃站台各頁面結構與命名規則，如 /login、/dashboard、/profile 等。 • 使用路由守衛（Navigation Guards）處理登入檢查、權限判斷或其他前置邏輯。 4. 狀態管理 • 規劃全站共享狀態（如使用者資料、Token等），使用 Vuex 或 Pinia 實作。 • 設定模組化存放與維護（module / store），讓專案更易於維護與擴充。 5. API 串接與資料處理 • 與後端工程師協商 API 規格、測試 API Endpoint 並進行串接。 • 使用 Axios / Fetch 等技術進行 HTTP 請求，捕捉錯誤並做適當處理（例如使用者提示、重新導向）。 • 實作與 API 串接後的資料展示，如列表、圖表、圖表套件（Chart.js、ECharts 等）或其他動態內容。 6. 表單驗證與使用者互動 • 建立或整合表單驗證套件（如 VeeValidate）確保使用者輸入資料正確性。 • 實作前端與使用者互動邏輯，如即時驗證、按鈕狀態切換、Loading 效果等。 7. 前端效能優化 • 依需求考量檔案切割（Code Splitting）、延遲載入（Lazy Loading）等優化策略。 • 使用 Lazy load 元件，針對大型套件或次要頁面在需要時才載入。 • 減少不必要的 re-render，優化元件結構、降低 API 請求次數。 特殊需求：對資訊安全有較高敏感度，例如 owasp top 10 防護實作。