分析

取消 console 錯誤

• https://eslint.org/docs/rules/no-console

使用 nuxt-env 取用 .env 參數

• https://github.com/nuxt-community/dotenv-module
• https://levelup.gitconnected.com/what-are-env-files-and-how-to-use-them-in-nuxt-7f194f083e3d

測試API

• https://challenge.thef2e.com/news/17

搭配 vuex 使用

• https://github.com/kurotanshi/hex-hotel-demo/blob/master/src/store.js

axios 管理

• https://ithelp.ithome.com.tw/articles/10212120
• https://medium.com/i-am-mike/使用axios時你的api都怎麼管理-557d88365619

管理 api, vuex

• https://github.com/ayugioh2003/real-world-nuxt/blob/master/services/EventService.js
• https://github.com/ayugioh2003/real-world-nuxt/blob/master/store/events.js
• https://github.com/ayugioh2003/real-world-nuxt/blob/master/pages/event/_id.vue

調整

.env 存 token, API_HOTEL 資訊，為了後續 API 呼叫
.env.example

nuxt.config.js 引入 @nuxt/dotenv，來存取 .env 資訊
package.json 引入 @nuxt/dotenv

Services/RoomService.js 管理 rooms 相關 API
store/rooms.js 管理 vuex 的 state, actions
pages/index.vue 測試送出 fetchRooms，抓取 state.rooms

需求

Footer 切版

需求細項

• container 寬度調整 (寫 plugin or 調整 padding)
  • Custom max-width for container · Issue #1102 · tailwindcss/tailwindcss
  • Container - Tailwind CSS
  • tailwindcss/defaultConfig.stub.js at master · tailwindcss/tailwindcss
• screen 寬度調整 (改 screen，參考 BS4 寬度設定)
  • Configuration - Tailwind CSS
  • Overview · Bootstrap v4.5
• 文字顏色調整
  • Create a palette - Coolors
  • w6-hotel
  • Customizing Colors - Tailwind CSS

調整

nuxt.config.js 調整 tailwindcss 路徑設定
tailwind.config.js 調整 style guide
@/assets/scss/tailwind.scss 引入 base.scss
@/assets/scss/base.scss 基本樣式設定

@/components/Footer.vue 切版
@/layouts/default.vue 引入 Footer

推測原因

1 似乎是不能在 fetch 時，直接用 api 網址取資料的樣子

最後排除原因

因為 .env 檔案沒有被放進 git 中，web app 無法取得 process.env.hotol_api 變數
需要在 vercel 服務中額外加入 environment variable

• Environment Variables - Vercel Documentation
• Configuration and Config Vars | Heroku Dev Center

參考資料

next.js

• mongodb - ECONNREFUSED during 'next build'. Works fine with 'next dev' - Stack Overflow
• connect ECONNREFUSED 127.0.0.1:80 · Issue #3960 · vercel/next.js
• connect ECONNREFUSED 127.0.0.1:80 · Discussion #13316 · vercel/next.js

nuxt.js

• Nuxt.js 使用中遇到的那些事 - IT閱讀
• connect ECONNREFUSED 127.0.0.1:80異常解決- SegmentFault 思否
• baseURL is undefined on some pages and logs show "Error: connect ECONNREFUSED 127.0.0.1:80" · Issue #438 · nuxt-community/axios-module

netlify

• Error: connect ECONNREFUSED 127.0.0.1:8000 on nuxtjs run generate - Support - Netlify Support Forums

vercel

• node.js - NextJS/Vercel/MongoDB FetchError: request to http://localhost:3000/api/gear failed, reason: connect ECONNREFUSED 127.0.0.1:3000 - Stack Overflow

分析

• input:focus ~ label 無效
• 應該是 label 被擺在 input 之前，選擇器選不到
• 位置交換，用 flex order 調整呈現順序
• https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
• https://learn.shayhowe.com/advanced-html-css/complex-selectors/

變動

pages/reservation.vue 樣式

問題

重新調整 Navbar 的結構

分析

• Kuro 雖然 index 和其他頁面的 Navbar 共用，但我覺得兩者的 input 行為應該不一樣
• 想要分開寫，先重構之前 index 的 FixedBar

調整

pages/index 引入 HomeNavbar
components/HomNavBar.vue 引入 Logo
components/Logo.vue 專門處理 Logo

需求

切版 Room navbar

分析

• 感覺和 Home 的 navbar 用法不同，所以拆出 NavBar，跟 HomeNavBar 做區別

調整

pages/room/_id.vue 引入 NavBar
components/NavBar.vue 樣式
components/HomeNavBar.vue 調整 <nav>

需求

切版 Main service

需求分析

• head
• body category room

調整

pages/index.vue

好像是因為 CSR 時，瀏覽器端會抓不到 process.env 的值
所以可以在 nuxt.config.js 中，先設定好 env 的值
這樣就可以在瀏覽器端抓到 process.env 的值

• https://ithelp.ithome.com.tw/articles/10200858
• https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config
• https://www.nuxtjs.cn/api/configuration-env

需求

切版 Main fixed-bar

需求分析

• logo，字體最後再用
• input，先塞個位置
• button，寫出基本 hover 樣式

調整

pages/index.vue 用 BEM 寫樣式

assets/scss/tailwind.scss 引入 check, button
check 暫定 datapicker 的 input 樣式
button 按鈕樣式

問題

修改 scss 後，畫面重整太慢

問題分析

• 可能引用方式不適合放在 tailwind.scss 裡
• 因為整個 tailwind 要重新編譯一次
• 改放 layout 看看 (x)
• 改用 nuxt.config.js 引入看看

參考資料

• https://zh.nuxtjs.org/api/configuration-css/
• https://stackoverflow.com/questions/56024619/how-to-import-whole-scss-folder-in-vue-nuxt-project
• https://github.com/nuxt-community/style-resources-module

調整

assets/scss/tailwind.scss 只負責引入 tailwind css

nuxt.config.js 在 css 配置 引入 main.scss
assets/scss/base.scss 改名成 main.scss
assets/scss/main.scss 引入 button, check

分析

• icon
  • https://material.io/resources/icons/?search=wifi&icon=wifi&style=baseline
• 使用
  • https://google.github.io/material-design-icons/
  • https://tpu.thinkpower.com.tw/tpu/articleDetails/1897
  • https://html.com/attributes/link-type/

變動

nuxt.config.js 引入 material icons
pages/room/_id.vue 樣式

取得日期區間

• node.js - Javascript - get array of dates between 2 dates - Stack Overflow

分析

• 之後要找能客製的 date-picker 來用

調整

pages/room/_id.vue 樣式

需求

切版 Main recommend

需求分析

• recommend head
• recommend rooms

調整

tailwind.config.js 新增 spacing gutter
index.vue 調整樣式名稱、添加樣式
main.scss 增加 .title 樣式

需求

切版 Main HouseMap

需求分析

• 如何達成奇怪的排版
• JS 動態抓寬度，會遇到 server 抓不到 window 議題
  • API: The Component - NuxtJS
  • Day 25. 說好的 window 和 document 呢? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
• 臨時想到的用 flex grow 補寬度

調整

pages/index.vue 引入 HouseMap.vue
components/HouseMap.vue 排版
components/Footer.vue 排版

找不到堪用的 QQ

• 政府行政機關辦公日曆表 | 政府資料開放平臺 (維修中)
• 資料集說明 | 政府行政機關辦公日曆表| 新北市政府資料開放平臺 只能用頁數查，有擋瀏覽器 CORS
  • https://data.ntpc.gov.tw/api/datasets/308DCD75-6434-45BC-A95F-584DA4FED251/data?page=0&size=1000
• 桃園市政府OpenAPI 桃園市政府 API 申請
• 臺北市資料大平臺
  • taiwan-holiday.js/opendata-tw.js at master · ensky/taiwan-holiday.js 有人抓台北的公開資料

其他方案

1. 用 nuxt 的 proxy 代打 API

候選人

• vercel (最後選擇方案)
• heroku
• netlify
• github page

分析

• rem 預設不曉得為啥是對應到 17px
• https://stackoverflow.com/questions/40372752/whats-the-correct-way-to-set-a-base-rem-value-in-css
• text-opcity 好像沒影響，記得加回來

修改

assets/scss/main.scss 修改文字顏色，通用選擇器等級太高
pages/room/_id.vue 排版 room 樣式，引入 Check
page/index.vue 引入 Check
components/Check.vue 先幫 Check 元件佔位子

分析

調整

pages/reservation.vue 排版樣式

分析

變動

page/room/_id.vue 樣式

用了 kuro 在 vue-cli 使用的套件
但在 nuxt 中使用會一直出問題

• northwalker/vue-hotel-datepicker: A Vue.js date range picker component without other dependencies for hotels and multi-purpose.

目前遇到 document is not defined 問題
暫時無法排除，想直接換套件了

• Nuxt Components - NuxtJS
• plugins - NuxtJS
• 插件 - NuxtJS | Nuxt.js 中文网
• API: plugins 属性配置 - NuxtJS | Nuxt.js 中文网
  // nuxt.config.js

module.exports = {
  plugins: ['~plugins/vue-notifications']
}

// plugins/vue-xxx.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

其他

• Using vuejs-datepicker with Nuxt JS | Aslam Doctor - Full Stack Web Developer
• Nuxt中关于window or document is not defined的问题总结_个人文章 - SegmentFault 思否
• Nuxt 出現 window or document undefined(window is not defined) | Welcome.Web.World
• Day 25. 說好的 window 和 document 呢? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

vuex-map-fields

• 使用 vuex-map-fields 讓 Vuex state 也可使用 v-model 綁定 | Puck's Blog
• maoberlehner/vuex-map-fields: Enable two-way data binding for form fields saved in a Vuex store

需求

Main Header 切版

需求分析

• h1
• image
• reserve-now

調整

pages/index.vue 樣式

問題

Bug ExperimentalWarning: The fs.promises API is experimental

問題分析

• 應該是 nodejs v10 版本太低，Promise API 那時還在實驗階段，在 v11 時才改成正式，所以目前才一直跳出提示

https://blog.csdn.net/sunhuansheng/article/details/82841495
https://nodejs.org/zh-tw/
https://www.reddit.com/r/node/comments/db7pzx/is_fspromises_api_still_experimental/

調整項目

• 重新安裝 nodejs 到 v12
• 重新安裝 node-sass 和 sass-loader

分析

• width 只有 350*2+30 = 730 而已
• 順便修改 button 樣式

調整

pages/thanks.vue
components/Navbar.vue 調整 margin-bottom
buttons.scss