# 前端網站技術文件 ### 環境配置及準備軟體 * 前端框架（建議使用）：Vue / React .. 自行熟悉為主 (本篇以 vite 為例) * 檢視設計稿工具：Adobe XD / Adobe Illustrator / Figma `(此處推薦使用 Adobe XD，遇到大檔案效能較好，如有提供 Figma 就使用 Figma，一般情況是提供 .AI 檔案，可用XD跟AI開啟。)` ### 作業流程 1. 安裝 **檢視設計稿工具**，並開啟設計稿，檢查是否缺圖 / 缺字體。(有缺少請告知) 1. 先自行定義設計稿 section 配置(或設計稿上會標註 section 範圍) 通常 1 section = 1 component。 #### 範例專案  #### 專案資料夾結構與設計稿配置  1. router 配置，可能因各專案而定，但以下幾個通常是必要的。 ``` { //首頁 path: "/", name: "Home", component: Home, }, { //表單送出後跳轉 path: "/formThanks", name: "formThanks", component: () => import ("@/pages/FormThanks.vue"), }, { //手機撥打電話後跳轉（注意，只有在手機裝置才跳轉） path: "/phoneThanks", name: "phoneThanks", component: () => import ("@/pages/PhoneThanks.vue"), }, { //404 name: "404", path: "/404", component: () => import ("@/pages/404.vue"), }, { path: "/:catchAll(.*)", redirect: "/404", } ``` 1. 開始施作。 ### 注意事項 1. 設計稿上元素都是絕對定位，以下提供一個常用 RWD - SCSS function. ``` //function.scss // 建議 max width >= 768 時使用, for PC @function size($size) { $c-size: calc(100vw * $size / 1920); @return #{$c-size}; } // 建議 max width < 768 時使用, for Mobile @function size-m($size) { $c-size: calc(100vw * $size / 375); @return #{$c-size}; } ``` #### 用法：  以這小女孩為例（上圖），從設計稿檢視工具可看見一些屬性（此處使用Figma）。 ``` position: absolute width: 488.07px height: 746.09px top: 147.91px left: 218px ``` 放入程式碼就會變成 ``` <template> <img class="absolute girl" src="./s1/girl.png" /> </template> <style lang="scss"> @import "@/assets/style/function.scss"; //引入 function .girl { width: size(488); height: size(746); left: size(218); top: calc(147); } @media screen and (max-width:768px) { //手機版請檢視設計稿上手機版尺寸並使用 size-m() .girl { width: size-m(xx); height: size-m(xx); left: size-m(xx); top: calc-m(xx); } } </style> ``` 1. 動態 各專案要求的動態都不太一樣，但需配置基本的 Scrolling Animation，也就是滾動到該處時需顯示浮入的動態。 以下 2 個專案可看範例： - UIkit 視差效果 https://cc.haiwo1.tw/ - AOS 滾動浮出 https://nsu.h-sin.tw/ 除了 Scrolling Animation 之外，會有一些小元素需要使用 keyframe 特殊處理。 - https://dm.h35.tw/ - https://gp.chyy.tw/ - https://aries-h35.tw/ 1. 輪播套件推薦使用 [Splide.js](https://splidejs.com/) 或 [Swiper.js](https://swiperjs.com/)，前者輕量化與可控制性高，後者為大牌輪播套件，也很方便。 3. Config 配置 建議將專案資料(名稱,地址,電話,資訊...等)寫入 config，以便下個專案切換時可以快速配置。