# Vue.js Workshop - cheat sheet ## 環境設定 - 確認是否有安裝過套件管理工具 (Package Manager) **[npm](https://www.npmjs.com/get-npm)** 或 **[yarn](https://yarnpkg.com/)**。 - 安裝 npm。 ## 安裝工具 - Chrome 擴充套件 **[Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)**：確認 Vue.js 元件的資料是否正確。 - **[Vue CLI](https://cli.vuejs.org/guide/installation.html#installation)**：快速產生 Vue.js 專案所需檔案及 Webpack 環境。 ```shell $ npm install -g @vue/cli # OR $ yarn global add @vue/cli ``` ## 建立專案 - 使用 Vue CLI 提供的指令建立專案：`$ vue create FOLDER_NAME` - 專案初始化設定： 1. Manually select features 2. Babel, CSS Pre-processors, Linter 3. Sass/SCSS (with node-sass) 4. Airbnb 5. Lint on save 6. In package.json 7. N - 進入專案：`$ cd FOLDER_NAME` - 開啟 server。 ```shell $ npm run serve # OR $ yarn serve ``` - 進入網頁：**http://localhost:8080/** ## 建立基本介面 - 清空 HelloWorld 元件。 - 使用指令安裝 **[Bootstrap](https://www.npmjs.com/package/bootstrap)** 套件。 ```shell $ npm install bootstrap # OR $ yarn add bootstrap@4.5.0 ``` - import bootstrap：`@import 'bootstrap/scss/bootstrap';` - 建立基本介面的 HTML 和 CSS： ```HTML= <div class="row no-gutters"> <!-- 選擇地區 --> <div class="toolbox col-sm-3 p-2 bg-white"> <div class="form-group d-flex"> <label for="city" class="col-form-label mr-2 text-right">縣市</label> <div class="flex-fill"> <select id="city" class="form-control"> <!-- 製作下拉選單 --> </select> </div> </div> <div class="form-group d-flex"> <label for="dist" class="col-form-label mr-2 text-right">地區</label> <div class="flex-fill"> <select id="dist" class="form-control"> <!-- 製作下拉選單 --> </select> </div> </div> </div> <!-- 顯示地圖和 UBike 站點 --> <div class="col-sm-9"> <div id="map"></div> </div> </div> ``` ## 製作下拉選單 - 複製 **[臺北市行政區資料](https://gist.github.com/chaowudev/69f3d0350e49f1fa80f98509084a0918)**，並建立新檔貼上，將新檔儲存在 `assets` 資料夾中。 - Vue.js 指令（directive）： - **[`v-bind`](https://vuejs.org/v2/guide/syntax.html#Attributes)**：屬性綁定 - **[`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for)**：列表渲染 - **[`v-model`](https://vuejs.org/v2/guide/forms.html#Select)**：表單綁定 ## 使用 AJAX 取得遠端資料 - **[Vue.js Lifecycle Diagram](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)**。 - 使用指令安裝 **[vue-axios](https://www.npmjs.com/package/vue-axios)** 套件。 ```shell $ npm install --save axios vue-axios # OR $ yarn add axios vue-axios ``` - API 來源：**https://tcgbusfs.blob.core.windows.net/blobyoubike/YouBikeTP.json** ## 使用 OSM 和 Leaflet 製作地圖與標記 UBike 站點 ### 建立地圖 - 使用指令安裝 **[Leaflet](https://leafletjs.com/download.html)** 套件。 ```shell $ npm install leaflet # OR $ yarn add leaflet ``` - **[Leaflet Quick Start Guide](https://leafletjs.com/examples/quick-start/)**。 - 捷運西門站經緯度：`[25.041956, 121.508791]`。 ### 標記 UBike 站點 - 使用 `computed` 屬性重新計算 ubikes 資料，挑出與使用者選擇區域相符的 ubikes。 ### 移除標記 - Leaflet：**[`eachLayer()`](https://leafletjs.com/reference-1.6.0.html#map-eachlayer)**、**[`removeLayer()`](https://leafletjs.com/reference-1.6.0.html#map-removelayer)** - Operator：**[`instanceof`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof)** ### 移動至新選擇的區域 - Leaflet：**[`panTo`](https://leafletjs.com/reference-1.6.0.html#map-panto)** ### 顯示 UBike 資訊 - Leaflet：**[`bindPopup`](https://leafletjs.com/reference-1.6.0.html#popup)** - **[YouBike 臺北市公共自行車即時資訊－主要欄位說明](https://data.taipei/#/dataset/detail?id=8ef1626a-892a-4218-8344-f7ac46e1aa48)**： - sna：場站名稱（中文） - sbi：場站目前車輛數量 - bemp：空位數量 - mday：資料更新時間 ```javascript= `<p><strong style="font-size: 20px;">${bike.sna}</strong></p> <strong style="font-size: 16px; color: #d45345;">可租借車輛剩餘：${bike.sbi} 台</strong><br> 可停空位剩餘: ${bike.bemp}<br> <small>最後更新時間: ${bike.mday}</small>` ``` ## 部署到 GitHub page - **[Vue 官方推薦部署方式](https://cli.vuejs.org/zh/guide/deployment.html#github-pages)** - 在根目錄下新增檔案 `vue.config.js`，並加入以下內容。 ```javascript= module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/' } ``` - 在根目錄下新增檔案 `deploy.sh`，並加入以下內容。 ```shell= #!/usr/bin/env sh # 當發生錯誤時終止腳本 set -e # 打包 npm run build # cd 到打包完的目錄下 cd dist # 初始化 git init git add -A git commit -m 'deploy' # 部署到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd - ``` - 在 Terminal 執行指令：`sh ./deploy.sh` ## 補充 - **[Leaflet marker 聚集化套件](https://github.com/Leaflet/Leaflet.markercluster#using-the-plugin)** - **[Leaflet marker 換顏色](https://github.com/pointhi/leaflet-color-markers/blob/master/js/leaflet-color-markers.js)** - **[取得使用者位置 Geolocation](https://developer.mozilla.org/zh-TW/docs/Web/API/Geolocation/Using_geolocation)** - **[GitHub SSH key 設定](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)** ## 參考資料 - [Vue.js 官方文件](https://vuejs.org/v2/guide/) - [Leaflet.js 官方文件](https://leafletjs.com/reference-1.6.0.html) - [重新認識 Vue.js | Kuro Hsu](https://kuro.tw/Realize-Vue-Book/) - [0 陷阱！0 誤解！8 天重新認識 JavaScript！](https://www.tenlong.com.tw/products/9789864344130) - [為你自己學 Git](https://www.tenlong.com.tw/products/9789864342662?list_name=srh)