轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考：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等前端技術的發展與實戰。
拓展閱讀
Vue3的強大魅力之處，還可以再實戰之中繼續體會，手把手教你在Vue3中搭建表格編輯系統~