转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，为开发者赋能。今天给大家带来的是一个基于vue3的开源项目：新能源汽车续航里程计算器。这是一个车间。通过完成这个项目，我们可以直观的感受到vue3的强大，了解一些项目的最佳实践。该项目的背景是目前备受关注的新能源汽车。经过近6年的发展，新能源汽车已经在市场上大规模普及，从一个“大玩具”变成了未来交通工具的基石。项目以新能源汽车行业最受关注的电池续航为例，利用vue3技术搭建续航计算器，展示使用Vue.js制作仪表盘的开发方法和心得。环境准备在开始阅读本教程之前，我们需要做以下准备工作来搭建一个良好的项目环境：安装稳定的Node.js8.9或更高版本(https://nodejs.org/en/download/)安装Yarn(https://yarnpkg.com)clone这个Github仓库https://github.com/petereijge...环境准备好了，我们可以阅读README.md来了解项目的概况。与一般的开发项目不同，这个项目最有意思的地方在于它不是一个最终的应用，而是一个有缺陷的应用，一个workshop。我们需要对它进行修复、完善和进一步开发，并在这个过程中掌握Vue开发技巧。在我们开始工作之前，让我们看一下这个项目的结构。项目结构介绍workshop-reactjs-vuejs/vuejs-app/src为workshop的源码目录，结构如下图所示。main.js是应用程序的入口点，App.vue是应用程序的输入组件。(项目源码结构)与vue2相比，vue3应用的创建方式发生了变化。你需要导入新的createApp()方法而不是使用newVue()，然后调用这个方法传递App.vue组件（入口组件）。接下来，我们将在createApp上调用mount方法并传递一个CSS选择器来标识挂载元素。这个过程和Vue2中的$mount示例方法一样（项目入口）App.vue组件详解（app.vue组件）App.vue是应用的入口组件，由以下几个部分组成。1.Script在上图中，name属性表示组件的名称（名称为“app”）。该组件使用的子组件在components-property中定义。这里TeslaBattery是App.vue组件的一个子组件，后面会介绍。要使用TeslaBattery组件，必须先导入它（importTesla-Batteryfrom"..."）。在data()函数中，我们可以定义和初始化状态变量，例如导入的徽标和问候语属性。要呈现徽标和问候语，必须在模板中定义它们。最终必须导出整个组件（通过exportdefault{}），以便它可以再次导入到其他组件和main.js中。2.模板模板负责定义组件生成的输出。Vue.js使用基于HTML的模板语法，允许通过data()函数轻松绑定和呈现数据。最简单的数据绑定形式是使用Mustache语法（双括号）的文本插值：{{greeting}}在上面的示例中，{{greeting}}替换了HelloTesla!!!与数据（）-函数值。在此问候语之上，使用img-tag呈现徽标。要将徽标分配给imgsrc属性，请使用该属性进行绑定。这个应用中经常用到属性绑定，你可以使用：v-bind最后，使用标签来实例化TeslaBattery组件并渲染它。这个标签必须使用Kebab大小写，这个我们后面会详细讨论3.样式在Vue中，我们使用SCSS文件来为整个应用程序设置样式，这里不再介绍。ContainervsPresentationcomponents在介绍了基本的项目架构之后，让我们看看项目的UI部分是如何工作的。该应用程序包含一个入口应用程序组件，该组件包含一个子组件TeslaBattery。TeslaBattery子组件包含以下辅助子组件：-TeslaCar：渲染带有车轮动画的TeslaCar图像。-TeslaStats：用于渲染每个Tesla模型的最大电池续航里程。涉及以下型号：60、60D、75、75D、90D和P100D。-TeslaCounter：手动控制速度和外部温度。TeslaClimate：当室外温度超过20度时，将暖气切换为空调。TeslaWheels：手动将车轮尺寸从19英寸调整为20英寸。这些组件最终构成了用户看到的仪表板。（最终显示的仪表板）下面的代码块清楚地显示了组件的层次关系。项目中同时使用了Container组件和Presentation组件。“TeslaBatteryComponent”是一个容器组件。基本子组件是Presentation组件。这样就可以将组件分为两类，有利于我们在开发过程中进行复用。（组件级别）两种组件的特点比较如下：容器组件——可以同时包含表示组件和容器组件。-通过“道具”创建数据并将其传输到子组件。-根据传入事件执行逻辑。-进行状态管理并知道何时进行组件渲染。-拥有国家财产并倾向于充当数据源。PresentationComponents-Presentation组件也称为“哑组件”，用户界面是其关键部分。-TeslaCar是一个哑组件，可确保呈现TeslaCar图像。-通过“props”接收数据，通过事件返回数据给父组件。-通常没有状态，也不依赖于应用程序的其余部分。（组件树）这种划分方式有以下优点，值得推荐。-高可重用性-哑组件更容易测试：只接收“props”，发出事件并返回UI的一部分-高可读性：代码少，组织良好，易于理解和调整-内容提供一致性并防止代码重复Props将数据传递给子组件如下图所示，我们使用props将TeslaBattery组件的stats-data（派生自stats()函数）传递给TeslaStats组件，链接上下组件。（使用props传递数据）具体操作需要使用TeslaBattery组件模板中的v-bind或者冒号运算符。（传递统计数据）该组件在脚本部分包含一个props-property用于接收统计数据。该属性的数据类型是数组。在此示例中，我们使用Vue.js中的v-for指令迭代统计数据，并以特定顺序显示它们。我们可以在filters-property中定义自定义过滤器。例如，过滤器“小写”可以将模型名称呈现为小写。在项目中，我们定制了一个过滤器，用于将英里转换为公里。CompositionAPI而不是filters-property在Vue3中，我们不能再使用filters-property。为了开发一个“英里到公里”的过滤器，我们需要使用CompostionAPI。CompostionAPI是一种基于函数的API，通常用于组合和重用各个组件的逻辑。首先，我们需要创建一个JavaScript文件composable.js来导出我们需要使用的数据和方法，例如“将英里转换为公里”过滤器。（封装过滤器的代码）然后，我们在需要使用过滤器的组件中导入composable.js，我们就可以在那里使用这些过滤器了。（导入和启用过滤器的代码）使用v-model实现双向数据绑定在Vue3中，我们可以在每个组件的模板中使用v-model指令来实现双向数据绑定。在这个项目中，TeslaCounter组件需要将速度（speed）绑定到TeslaBattery组件上。（组件之间的双向数据绑定）我们使用TeslaBattery组件模板中的v-model指令将速度属性（车辆速度）绑定到TeslaCounter组件。（使用v-model传递数据的代码）TeslaCounter作为接收组件，需要接受props中的modelValue属性。此外，需要发出@update:modelValue事件来通知数据变化。在increment()方法中触发emit操作，当速度发生变化时，将最新的数据“推送”到其绑定的TeslaBattery组件中。(emit事件通知代码)总结以上是开源项目新能源汽车续航里程计算器中源码的核心介绍。项目中还有更多优秀实践值得学习和借鉴。除此之外，项目中还添加了一个PPT文件，详细介绍了通过v-model指令进行双向数据绑定、使用按钮将事件分配给事件以及创建其他组件等实践。后续我们会为大家推荐更多有趣的开源项目，了解vue等前端技术的发展与实战。阅读拓展：如果你已经熟悉Vue3的用法，想了解其他Vue3项目示例，可以在这里阅读这篇文章，了解Vuede新的脚手架工具：Vite。Vite是一个由原生ESM提供支持的Web开发构建工具。开发环境基于浏览器原生ES导入开发，生产环境基于Rollup打包。
