轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考：https://dzone.com/articles/build-a-tesla-battery-range-calculator-yourself-it
今天，我們給大家帶來的是一個基於vue3的開源專案：電動車電池範圍計算器。這是一個workshop，通過完成該專案，我們可以直觀的感受到vue3的強大，瞭解一些專案最佳實踐。
專案的背景是當前備受關注的電動車。經歷了近6年的發展，電動車在市場上得到大規模普及，從“大玩具”變為未來交通的基石。專案以電動車行業最受關注的續航能力為例，使用vue3技術構建一個電池範圍計算器，來展示用Vue.js製作儀表盤的開發方式和體驗。
環境準備
在開始閱讀本教程之前，我們需要做以下準備，搭建好專案環境：
- 安裝穩定的Node.js版本8.9或者更高版本（https：// nodejs.org/en/download/）
- 安裝Yarn (https://yarnpkg.com)
- 克隆此Github儲存庫https://github.com/petereijgermans11/workshop-reactjs-vuejs
環境準備完畢，我們可以讀取README.md瞭解專案的概況。
與常見的開發專案不同，這個專案最有意思的地方在於，它不是一個最終的應用程式，而是一個存在缺陷的應用程式，即workshop。我們需要對它進行修復完善並進一步開發，並在這個過程中掌握vue開發技巧。
在正式開始工作之前，讓我們先一起來了解一下這個專案的結構。
專案結構介紹
workshop-reactjs-vuejs/vuejs-app/src是workshop的原始碼目錄，結構如下圖所示。main.js是應用程式的入口點，App.vue是應用程式的輸入元件。
（專案原始碼結構）
專案入口
相比於vue2，Vue3應用程式的建立方式已更改，需要匯入新的createApp（）方法，而不是使用new Vue（），然後呼叫這個方法來傳遞App.vue元件（入口元件）。
緊接著我們將在createApp上呼叫mount方法，並傳遞一個CSS選擇器標識mount元素，這個過程和在Vue 2中操作$ mount示例方法一樣
（專案入口）
App.vue元件詳解
（app.vue元件）
App.vue是應用程式的入口元件，由以下部分組成。
1. 指令碼
在上圖中，name property 表示元件的名稱（名稱為“ app”）。該元件使用的子元件在中定義components-property。在這裡，TeslaBattery是App.vue元件的子元件，後面會介紹到。要使用TeslaBattery元件，必須首先將其匯入（import Tesla-Battery from "..." ）
在中data()-function，我們可以定義和初始化狀態變數，例如匯入的徽標和greeting屬性。要呈現徽標和問候語，必須在模板中定義它們。最終必須（通過export default { } ）匯出整個元件，以便可以將其再次匯入到其他元件和main.js中。
2. 模板
模板負責定義元件生成的輸出。Vue.js 使用基於HTML的模板語法可以使資料通過data ()-function進行繫結並輕鬆呈現。資料繫結的最簡單形式是使用Mustache語法（雙括號）的文字插值：{{greeting}}
在上面的示例中，{{greeting}} 替換Hello Tesla !!! 成為和data()-function相關的值。在此問候語上方，用img-tag來呈現徽標。要將徽標分配給img src-attribute，用屬性進行繫結。在此應用程式中經常使用屬性繫結，可以使用： v-bind <img :src="logo"<img v-bind:src="logo"> 進行繫結
最後，使用<tesla battery>-tag來例項化TeslaBattery元件並進行渲染。對於此標籤必須使用Kebab case，這一部分我們會在後面詳細討論
3. 樣式
在Vue中，我們使用SCSS檔案對整個應用進行樣式設定，這裡不展開介紹。
Container vs Presentation元件
介紹完基礎的專案架構，我們來看專案的UI部分是怎麼執行的。該應用程式包含一個入口應用程式元件，該元件包含一個子元件TeslaBattery。TeslaBattery子元件包含以下二級子元件：
l TeslaCar：使用車輪動畫渲染TeslaCar影像。
l TeslaStats：用於渲染每個Tesla模型的最大電池範圍。涉及以下型號：60、60D，75、75D，90D和P100D。
l TeslaCounter：手動控制速度和外部溫度。
l TeslaClimate：當外部溫度超過20度時，將供暖改為空調。
l TeslaWheels：手動將車輪尺寸從19英寸調整為20英寸。
這些元件最終構成了使用者看到的儀表盤。
（最終展示的儀表盤）
以下程式碼塊清晰的顯示了元件的層級關係，專案中同時用到了Container元件和Presentation元件。“ Tesla電池元件”是容器元件。基礎子元件是Presentation元件。這樣可將元件分為兩類，有利於我們在開發過程中重複使用。
（元件層級）
兩種元件的特點對比如下：
Container元件
l 可以同時包含表示和容器元件。
l 通過“道具”建立資料並將資料傳輸到子元件。
l 基於傳入事件執行邏輯。
l 進行狀態管理，並知道進行元件渲染的時間。
l 具有狀態屬性，並傾向於充當資料來源。
Presentation元件
l 演示元件也稱為“啞元件”，使用者介面是其重點部分。
l TeslaCar是一個啞元件，可確保渲染TeslaCar影像。
l 通過“ props”接收資料，並通過事件將資料返回給父元件。
l 通常沒有狀態，也不依賴於其餘的應用程式。
（元件樹）
此劃分方法具有以下優點，值得推薦。
l 重用性高
l 啞元件更易於測試：僅接收“道具”，發出事件並返回一部分UI
l 可讀性高：程式碼少且組織清晰，容易理解和進行調整
l 內容提供一致並防止了程式碼重複
通過Props將資料傳遞給子元件
在下圖中可以看出，我們使用props，將stats-data（源自stats（）函式）從TeslaBattery元件傳遞到TeslaStats元件，連結起上下級元件。
（使用props傳遞資料）
具體操作上，你需要在TeslaBattery元件模板中使用v-bind或冒號操作符。
（傳遞stats資料）
該元件在指令碼部分包含一個props-property，用於接收stats-data。該屬性的資料型別為陣列。在本例中，我們使用來自Vue.js的v-for指令來遍歷統計資訊，按照特定順序進行展示。
我們可以在filters-property中定義自定義過濾器。例如，過濾器“lowercase”，可以用小寫呈現模型名。在專案中，我們自定義了一個過濾器，把英里轉換為公里。
代替filters-property的Composition API
在Vue 3中，我們無法再使用filters-property。為了開發“把英里轉換為公里”的過濾器，我們需要使用Compostion API。Compostion API是基於函式的API，通常用於組合與重用各元件的邏輯。
首先，我們需要建立一個JavaScript檔案composable.js，export出我們需要使用的資料和方法如，“把英里轉換為公里”的過濾器。
（封裝過濾器的程式碼）
然後，我們將composable.js匯入到需要使用該過濾器的元件中，就可以在其中使用這些過濾器了。
（匯入並啟用過濾器的程式碼）
使用v-model實現雙向資料繫結
在Vue3中，我們可以使用各元件的模板中的v-model指令實現雙向資料繫結。
在這個專案中， TeslaCounter元件需要將速度（speed）繫結到TeslaBattery元件。
（元件間的雙向資料繫結）
我們在TeslaBattery元件模板中使用v-model指令將speed屬性（車速）繫結到TeslaCounter元件。
（使用v-model傳遞資料的程式碼）
作為接收元件，TeslaCounter則需要在props中接受modelValue屬性。此外，還需要emit出@update:modelValue事件，用於通知資料變更。emit操作在increment()方法中觸發，在速度發生變化時，將最新的資料“推送”給其繫結的TeslaBattery元件。
（emit事件通知的程式碼）
總結
以上就是開源專案電動車電池範圍計算器中原始碼的核心介紹，專案中還有更多優秀的實踐值得大家學習和參考。
除此之外，專案中還新增了一個PPT檔案，詳細說明了諸如通過v-model指令進行雙向資料繫結、使用按鈕向事件分配事件以及建立其他元件之類的做法。
後續我們還會為大家推薦更多有意思的開源專案，一起了解vue等前端技術的發展與實戰。