转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
明天，咱们给大家带来的是一个基于vue3的开源我的项目：电动车电池范畴计算器。这是一个workshop，通过实现该我的项目，咱们能够直观的感触到vue3的弱小，理解一些我的项目最佳实际。
我的项目的背景是以后备受关注的电动车。经验了近6年的倒退，电动车在市场上失去大规模遍及，从“大玩具”变为将来交通的基石。我的项目以电动车行业最受关注的续航能力为例，应用vue3技术构建一个电池范畴计算器，来展现用Vue.js制作仪表盘的开发方式和体验。
环境筹备
在开始浏览本教程之前，咱们须要做以下筹备，搭建好我的项目环境：
- 装置稳固的Node.js版本8.9或者更高版本（https：// nodejs.org/en/download/）
- 装置Yarn (https://yarnpkg.com)
- 克隆此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，75、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 打包。