{"id":19848147,"url":"https://github.com/shunnnet/fake-grr","last_synced_at":"2026-03-02T23:33:17.652Z","repository":{"id":114650076,"uuid":"365761046","full_name":"shunnNet/fake-grr","owner":"shunnNet","description":null,"archived":false,"fork":false,"pushed_at":"2021-05-09T16:33:59.000Z","size":14948,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T12:46:33.612Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shunnNet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-09T13:35:45.000Z","updated_at":"2021-05-09T16:34:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"89a56599-970a-49ae-a178-a605d430f19e","html_url":"https://github.com/shunnNet/fake-grr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Ffake-grr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Ffake-grr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Ffake-grr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shunnNet%2Ffake-grr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shunnNet","download_url":"https://codeload.github.com/shunnNet/fake-grr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241226812,"owners_count":19930487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T13:16:23.518Z","updated_at":"2026-03-02T23:33:17.583Z","avatar_url":"https://github.com/shunnNet.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fake-ggr\n\n## 說明\n本專案供練習使用\n\n## 如何運行專案?\n1.  透過 `git clone` 將專案抓到本地\n\n2.  **確定你在 git master 線上**，若不是請 checkout 過去。\n\n3.  在專案根目錄運行 `npm install` 安裝模組\n\n4.  安裝完 2 之後，`npm run serve` 運行專案\n\n\n## 製作過程遭遇的問題\n\n### **問題 1 : 安裝 vue-svg-loader**\n自己先前都是使用 vue-svg-loader 處理 svg 檔案，但是使用 vue-cli 4 + vue 3 的時候，會打包失敗。\n\n首先上 github 看有沒有相關 [issue](https://github.com/visualfanatic/vue-svg-loader/issues/136)\n接著照著專案 readme 指示，升級 `vue-style-loader`，並修改 `vue.config.js` 的 svg 設定。\n\n仍然沒有解決。\n\n接著嘗試升級 vue-loader 到 v16 以上，才解決這個問題。(算是誤打誤撞)\n\n------------------------------\n\n### **問題 2 : vue 3 沒有輪播套件**\n這次的 gogoro 網站使用 `vue-slicker`，我則是原本都用 `vue-awesome-swiper`。這兩個都沒有 vue3 版本。\n\n基於個人怨念，中間花了1天半左右嘗試自己刻，最後還是覺得自己寫不是妥善的辦法 orz。\n\n所以思路轉向下面兩個做法\n\n1. 拿 `vue-slicker` 改成 vue3 版本\n2. 用 vue 元件包 swiper\n\n方案一有現成的可以改，而且他只有一個元件，改起來很簡單。如果只是要複刻這個網站，用方案一應該很快。\n\n但 slicker 自己的 repo 好像上次更新是兩三年前了，如果把專案想成會往後發展，那使用有在跑的 swiper 比較好，而且可以少裝 jQuery。\n\n於是就轉向方案2了。就在我打開 swiper 的官方網站，這才發現 swiper 有推出 vue3 對應的元件可以用，於是就這麼套用了。\n\n--------------------------------\n\n### **問題 3 : 元件切分的標準? (未解決)**\n以 `src/components/pages/index.vue` 為例。\n裡面切了以下幾個元件:\n- **`BannerEeyo.vue`**\n- **`BannerStation.vue`**\n- **`CampaignCard.vue`**\n- **`PhotoCard.vue`**\n- `BannerQuotes.vue`\n- `Impact.vue`\n\n`BannerQuotes.vue` 及 `Impact.vue` 都包裝了一組獨立的 javascript 功能，我認為獨立出來可以避免跟其他邏輯混在一起。*(個人理解：而且他們都會頻繁更新資料狀態，如果放在 index.vue 層，會導致其他動態資料的部分一起被重新渲染)*\n\n**`BannerEeyo.vue`**、**`BannerStation.vue`**、**`CampaignCard.vue`**、**`PhotoCard.vue`** 這四個我就切得很猶豫。\n\n他們沒有被重用，沒有動態資料，沒有獨立的 js 功能。只是包了一組模板 + css，讓 `index.vue` 變得不要那麼長而已。\n值得多用一個元件嗎？ (犧牲初始化時間換取可讀性)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Ffake-grr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshunnnet%2Ffake-grr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshunnnet%2Ffake-grr/lists"}