基于vue+ts实现的快速数学口算功能的实现

男娘i 2022-12-23 07:20 67阅读 0赞

## 功能描述： ##

快速数学口算功能项目  
要求：  
1、 使用 Vue 2.0 + TypeScipt  
2、 可设置计算上限（如10以内、20以内，30以内，100以内等）  
3、 可设置计算方式（多选）可选项包括 加法、减法、乘法、除法  
5、 开始答题后，屏幕显示需要口算的表达式，如：3 + 2 等于多少？  
6、 屏幕下方提供0~9的数字键盘、后退键和确认键。  
7、 点击确认键后，判断输入是否为空，如不为空，进行答案判断，并提示正确和错误，延时3秒后下一题，如果已达到设置的连续出题数量，给出最终结果，显示做题数量和正确的答案数量，下方显示再来一次按钮，点击再来一次可以重置设置相关参数再次开始口算。  
**源码链接**

项目代码链接为：[http://git.fastoa.co/Ztq/ztq\_vue][http_git.fastoa.co_Ztq_ztq_vue]  
**实现效果**![在这里插入图片描述][20201123224625893.gif_pic_center]

## 实现思路 ##

在本次数学口算项目的实现中，是基于Vue的脚手架vue-cli+ts+less实现的，通过定义接口及调用，和各种方法及定时器的调用进行简单的实现，刚入门学习vue的脚手架的同志有需要可以参考下

## 技术介绍 ##

**vue-cli介绍：**  
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included

参考来源：作者：致自己\_cb38及相关安装和使用教程请参考：[https://www.jianshu.com/p/06a9f112867d][https_www.jianshu.com_p_06a9f112867d]  
**Typescript介绍**  
TypeScript 是一种给 JavaScript 添加特性的语言扩展。是开源和跨平台的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

TS官方文档学习地址为：[https://www.tslang.cn/docs/home.html][https_www.tslang.cn_docs_home.html]

**less介绍**  
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。  
Less 可以运行在 Node 或浏览器端。

less官方文档学习地址为：[http://lesscss.cn/\#using-less][http_lesscss.cn_using-less]

[http_git.fastoa.co_Ztq_ztq_vue]: http://git.fastoa.co/Ztq/ztq_vue
[20201123224625893.gif_pic_center]: /images/20221120/4ae2e284a4be456484e560e2d2368fb6.png
[https_www.jianshu.com_p_06a9f112867d]: https://www.jianshu.com/p/06a9f112867d
[https_www.tslang.cn_docs_home.html]: https://www.tslang.cn/docs/home.html
[http_lesscss.cn_using-less]: http://lesscss.cn/#using-less