進擊中的Vue 3——「電動車電池範圍計算器」開源項目

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

今天，咱們給你們帶來的是一個基於vue3的開源項目：電動車電池範圍計算器。這是一個workshop，經過完成該項目，咱們能夠直觀的感覺到vue3的強大，瞭解一些項目最佳實踐。

項目的背景是當前備受關注的電動車。經歷了近6年的發展，電動車在市場上獲得大規模普及，從「大玩具」變爲將來交通的基石。項目以電動車行業最受關注的續航能力爲例，使用vue3技術構建一個電池範圍計算器，來展現用Vue.js製做儀表盤的開發方式和體驗。

環境準備

在開始閱讀本教程以前，咱們須要作如下準備，搭建好項目環境：

1. 安裝穩定的Node.js版本8.9或者更高版本（https：// nodejs.org/en/download/）
2. 安裝Yarn (https://yarnpkg.com)
3. 克隆此Github存儲庫https://github.com/petereijge...

環境準備完畢，咱們能夠讀取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子組件包含如下二級子組件：

-TeslaCar：使用車輪動畫渲染TeslaCar圖像。
-TeslaStats：用於渲染每一個Tesla模型的最大電池範圍。涉及如下型號：60、60D，7五、75D，90D和P100D。
-TeslaCounter：手動控制速度和外部溫度。

• TeslaClimate：當外部溫度超過20度時，將供暖改成空調。
• TeslaWheels：手動將車輪尺寸從19英寸調整爲20英寸。

這些組件最終構成了用戶看到的儀表盤。

（最終展現的儀表盤）

如下代碼塊清晰的顯示了組件的層級關係，項目中同時用到了Container組件和Presentation組件。「 Tesla電池組件」是容器組件。基礎子組件是Presentation組件。這樣可將組件分爲兩類，有利於咱們在開發過程當中重複使用。

（組件層級）

兩種組件的特色對好比下：

Container組件
-能夠同時包含表示和容器組件。
-經過「道具」建立數據並將數據傳輸到子組件。
-基於傳入事件執行邏輯。
-進行狀態管理，並知道進行組件渲染的時間。
-具備狀態屬性，並傾向於充當數據源。

Presentation組件
-演示組件也稱爲「啞組件」，用戶界面是其重點部分。
-TeslaCar是一個啞組件，可確保渲染TeslaCar圖像。
-經過「 props」接收數據，並經過事件將數據返回給父組件。
-一般沒有狀態，也不依賴於其他的應用程序。

（組件樹）

此劃分方法具備如下優勢，值得推薦。
-重用性高
-啞組件更易於測試：僅接收「道具」，發出事件並返回一部分UI
-可讀性高：代碼少且組織清晰，容易理解和進行調整
-內容提供一致並防止了代碼重複

經過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 項目實例，這裏能夠閱讀此文,瞭解關於 Vuede 全新腳手架工具：Vite 。Vite 是一個由原生 ESM 驅動的 Web 開發構建工具。在開發環境下基於瀏覽器原生 ES imports 開發，在生產環境下基於 Rollup 打包。