All Projects → chenstarx → vuecabulary

chenstarx / vuecabulary

Licence: Apache-2.0 License
用Vue写的高效背单词App,方法来自《17天搞定GRE单词》

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to vuecabulary

electron-vue-vite-boilerplate
Electron Vue Vite Boilerplate for you next project
Stars: ✭ 26 (-44.68%)
Mutual labels:  vue3
layui-vue
采用 layui 风格的 vue3 组件库。(UI一直是个痛,那就先基于现有的UI,先封装几套玩玩。)
Stars: ✭ 15 (-68.09%)
Mutual labels:  vue3
vuejs3-datepicker
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
Stars: ✭ 23 (-51.06%)
Mutual labels:  vue3
variantwind
Most elegant way to work with TailwindCSS variants in Vue
Stars: ✭ 45 (-4.26%)
Mutual labels:  vue3
codeiiest-web
https://codeiiest.org | Website for Code IIEST
Stars: ✭ 23 (-51.06%)
Mutual labels:  vue3
OSAPI
👋 OSAPI 是依靠通用性后台管理平台搭建的API管理平台,基于 vue3、Nestjs 技术栈实现,包含 RBAC 角色权限模块、数据展示、编辑等模块。
Stars: ✭ 32 (-31.91%)
Mutual labels:  vue3
hoc-element-table
📦 A Vue 3.x Table Component built on Webpack 5
Stars: ✭ 26 (-44.68%)
Mutual labels:  vue3
vue3.0-elemenplus-admin-template
一个基于Vue3.0和Element-plus的后台管理模板,一个使用Koa2作为后台程序使用MongoDB作为缓存数据库和MariaDB作为数据的后台管理模板系统
Stars: ✭ 20 (-57.45%)
Mutual labels:  vue3
mrouted
The original DVMRP (dynamic multicast routing) implementation for UNIX
Stars: ✭ 58 (+23.4%)
Mutual labels:  gre
ak-vue3
组件库包含了 AutoForm 自动表单、BackTop 返回顶部、Breadcrumb 面包屑、 Button 按钮、Cascader 级联选择器、Checkbox 多选框、Collapse 折叠面板、ColorPicker 颜色选择器、DataPicker 时间选择器、Dialog 弹层对话框、Alert 弹框、Echarts 图形图表、Form 表单、Input 输入框、Lazy 图片延时加载、Loading 加载等待、Menu 菜单、Pagination 分页、Progress 进度条、Radio 单选框、Select 选择器、Steps 步骤条、Swiper 图片轮播、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 提示、Tr…
Stars: ✭ 24 (-48.94%)
Mutual labels:  vue3
vite-example
Todo app with vite/vue3/vue-router4
Stars: ✭ 22 (-53.19%)
Mutual labels:  vue3
xForm
基于[email protected]的动态表单生成器。
Stars: ✭ 25 (-46.81%)
Mutual labels:  vue3
vue3-highcharts
Vue 3 component wrapper for Highcharts.js
Stars: ✭ 41 (-12.77%)
Mutual labels:  vue3
vue-snippets
Visual Studio Code Syntax Highlighting For Vue3 And Vue2
Stars: ✭ 25 (-46.81%)
Mutual labels:  vue3
agnosticui
AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.
Stars: ✭ 326 (+593.62%)
Mutual labels:  vue3
WordFrequencyPython
Python code to find out most frequent words from different word lists
Stars: ✭ 31 (-34.04%)
Mutual labels:  gre
vue3-dropzone
HTML5 drag-drop zone with vue3
Stars: ✭ 34 (-27.66%)
Mutual labels:  vue3
giantgo-render
基于vue3 element plus的快速表单生成器
Stars: ✭ 28 (-40.43%)
Mutual labels:  vue3
tree-chart
Flexible tree chart using Canvas and Svg, powered by D3.js; ✅Support Vue, Vue3 and React;
Stars: ✭ 265 (+463.83%)
Mutual labels:  vue3
v-pip
🖼 Tiny vue wrapper for supporting native picture-in-picture mode.
Stars: ✭ 30 (-36.17%)
Mutual labels:  vue3

Vuecabulary

作者正在计划用Vue3+TS重构本项目

一款用Vue写的高效率在线背单词WebApp,经作者实践两周可背完1700个GRE单词。

写这个App是因为作者用Excel背GRE单词时发现效率虽高,但很难坚持,因此萌生了自己整合各路快速记忆方法写个背单词App的想法,并将其实现

项目参考了杨鹏的《17天搞定GRE单词》和广泛流传的Excel背单词法,以及艾宾斯浩记忆周期,用JS实现了背单词的逻辑,基于Promise简单封装了一下indexDB,用在本地保存背单词的进度

项目实例词库是某知名机构总结的最近几年真题词频最高的1700词,作者靠它抱佛脚两周考上了320

本项目尤其适合做为Excel背单词法的替代方案,尤其适合GRE这种考试,适合需要短期记忆大量单词的场景

因为是备考GRE时在空余时间写的,项目一些地方的代码复用写的比较糟糕,也未考虑性能优化。都是本地I/O,内存啥的肯定够用,所以影响不大能用就行

点此进入本项目的demo页面(甚至可以直接在这背GRE单词)

如果觉得本项目有帮助记得给个star~

项目特点

  1. 使用Vue.js做为整体框架
  2. 使用HTML5的indexDB做为本地数据库
  3. 异步api全部使用Promise封装
  4. 前端页面很简单,主要的时间花在了api上
  5. 基于多方面考虑做了用户系统,不同用户有独立的学习进度

因为项目使用了indexDB这种浏览器本地数据库来储存数据, 不同机器间学习数据不互通。但又因为在本地就有用户系统, 之后能很方便的把数据接上云端。

之所以使用indexDB是因为学习进度需要被长久保存, 在Web端能满足需求的只有localStorage和indexDB。 但这种需要储存大量数据的应用场景不适合使用localStorage,因此最后采用了indexDB。

因为indexDB和mongoDB有很多的相似处,本项目在未来可以很方便的切换为云端储存。

技术栈

Vue + Vuex + Vue-router + indexDB

代码说明

本项目核心是两个封装好的api,位于/src/api目录下,剩余的都是在一般的vue项目里很常见的代码,花一点时间就能看懂故不多介绍。

/src/api/cache.js

  • 操作本地数据库indexDB的api,类似于MVC模型中的M和V
  • 因为indexDB是异步读写,所以每个api都用到了Promise
  • 数据库设计了三个表,每个表的数据结构在代码内有详细介绍。
    • user表,储存用户基本信息,比如用户名和密码。
    • learned表,储存用户对每个单词的熟悉度,记忆周期等数据
    • progress表,储存用户对每个list的学习进度等信息(这个表好像有点鸡肋,但一时半会也想不出更好的能满足需求的方案,相当于为了查询性能做了数据储存的冗余的操作)

/src/api/word.js

  • 应用层api,类似于MVC模型的C
  • 包含诸如"获取下一批要复习的单词"这样的api
  • 艾宾浩斯记忆周期和《17天搞定GRE单词》中的方法在这里体现

本地安装与使用

# 下载项目到本地
git clone https://github.com/chenstarx/vue-vocabulary

# 进入项目文件夹
cd vue-vocabulary

# 安装npm依赖
npm install

# 开发模式运行
npm run serve
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].