Categories
程式開發

Vue.js教程:构建一个特斯拉汽车余电计算器


本文最初发布于 DEV 网站,经原作者授权由 InfoQ 中文站翻译并分享。

这篇教程关注的是全新的汽车驾驶体验。电动汽车已经是公认的未来趋势。但很多人都关心的一个问题是,电车充满电后究竟可以跑多远?行驶速度、气温和轮毂尺寸会对续航里程有什么影响?在本教程中,我们会使用 Vue.js 这个容易理解的 JavaScript 框架制作一个仪表盘,通过它可以计算特斯拉电动汽车在不同情况下的行驶距离。

Vue.js教程:构建一个特斯拉汽车余电计算器 1

作为本教程的起点,请克隆这个 Github 存储库:

https://github.com/petereijgermans11/workshop-reactjs-vuejs

然后转至 vuejs-app 目录。

cdworkshop-reactjs-vuejs/vuejs-app

阅读 README.md,了解我们要执行的任务。上图是我们将要构建的应用程序的示例。我们先从一个有问题的应用程序开始入手,需要修复它的问题并做进一步的开发。在开始之前,首先解释一下这个应用程序的结构。

要求

要开始学习本教程,你需要安装以下内容:

项目结构

这个项目的结构如下图所示,图上还展示了构成应用程序的各个组件。main.js 是应用程序的入口点。App.vue 是应用程序的入口组件。图下方是 App.vue 组件。

原文链接:【https://www.infoq.cn/article/kBYVh8ep4OrWyrs8wyqv】。未经作者许可,禁止转载。