前言
曾经有段时间在公司比较闲，所以想在电脑上背前单词，但由于在电脑上没什么好用的背单词软件，所以诞生了开发本项目的想法
Type Wrods 是一个使用 Vue3 + tailwindcss 快速开发的项目，一款 可以在网页上练习单词和文章的工具 ，用户数据保存在本地，完全开源的项目
效果截图
在线访问
Github: github.com/zyronon/Typ...
国内地址：2study.top/
项目介绍
这个项目虽然是从 23 年开始开发的，但初版开发时间其实差不多 2 周左右，后续的提交大多都是在完善功能和修复 bug，现在功能已经基本比较完善了
主要用于解决这些问题：
- 手机上背单词很方便，但无法方便的练习拼写
- 上班的时候想背单词，但不能长时间使用手机
- 文章练习、背诵、默写
功能列表
单词练习
- 三种输入模式：跟打 / 复习 / 默写
- 智能模式：记忆曲线自动计算学习单词，并通过默写加深记忆
- 自由模式：不受限制，自行规划
- 提供音标、发音（美音、英音）、例句、短语、近义词、同根词、词源、错误统计等功能
背文章
- 内置经典教材书籍，也可自行添加、导入文章，提供一键翻译、译文对照功能
- 跟打 + 默写双模式，逐句输入，自动发音，让背诵更高效
- 支持边听边默写，强化记忆
收藏、错词本、已掌握
- 学习单词时输入错误自动添加到错词本，方便后续复习
- 可主动添加到已掌握，后续学习时自动跳过
- 可主动添加到收藏中，以便巩固复习
高度自由
- 丰富的键盘音效
- 可自定义快捷键
- 高度定制化的设置选项
词库
内置了常用的 CET-4 、CET-6 、GMAT 、GRE 、IELTS 、SAT 、TOEFL 、考研英语、专业四级英语、专业八级英语等词库。 尽可能满足大部分用户对背单词的需求，用户也可自行创建词典
技术
算是一个常规的 Vue 项目，使用了 Vue3 + Vite + tailwindcss 来开发，开发体验非常棒，短时间内就把项目 demo 做出来了
数据管理
数据方面使用了 Pinia + idb-keyval 来管理, idb-keyval 是一个只有几 KB 大小的工具库，用于管理 IndexedDB
运行时使用 idb-keyval 把保存在 IndexedDB 的数据读取出来再设置到 Pinia 的 store 里面，同时监听 Pinia 的 $state 属性，变动时再通过 idb-keyval 保存到 IndexedDB，以实现数据的持久化
样式
使用了 unocss 库，因为它完全支持 tailwindcss 的语法，并且生成的 css 文件更小
文章分句
由于需要解析文章，解析成每一句和每个词，方便前端用户输入，我基本上把所有的分句库/ nlp 库体验一遍，例如：sentence-tokenizer、sentence-splitter、wink-nlp、compromise等，基本上都不太行，效果最好的只有compromise，但体积非常大😅，后续考虑使用后端接口调用大模型来分句
结束
以上就是文章的全部内容，感谢看到这里，希望对你有所帮助或启发！创作不易，如果觉得文章写得不错，可以点赞收藏支持一下，也欢迎给我的开源项目点
Star