{"id":13536400,"url":"https://github.com/lin-xin/notepad","last_synced_at":"2025-12-29T23:36:36.452Z","repository":{"id":47295906,"uuid":"78932326","full_name":"lin-xin/notepad","owner":"lin-xin","description":"基于vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。","archived":false,"fork":false,"pushed_at":"2019-07-15T06:55:46.000Z","size":414,"stargazers_count":626,"open_issues_count":5,"forks_count":216,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-11-03T01:33:08.859Z","etag":null,"topics":["localstorage","todolist","vue","vuex"],"latest_commit_sha":null,"homepage":"https://lin-xin.gitee.io/example/notepad/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lin-xin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-14T09:52:27.000Z","updated_at":"2024-10-30T02:38:30.000Z","dependencies_parsed_at":"2022-08-27T08:40:39.854Z","dependency_job_id":null,"html_url":"https://github.com/lin-xin/notepad","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-xin%2Fnotepad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-xin%2Fnotepad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-xin%2Fnotepad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lin-xin%2Fnotepad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lin-xin","download_url":"https://codeload.github.com/lin-xin/notepad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750791,"owners_count":20827782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["localstorage","todolist","vue","vuex"],"created_at":"2024-08-01T09:00:38.499Z","updated_at":"2025-12-29T23:36:36.407Z","avatar_url":"https://github.com/lin-xin.png","language":"Vue","readme":"# 基于vue2.0+vuex+localStorage开发的本地记事本\n\n\u003e 本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。在线预览地址：[DEMO](http://blog.gdfengshuo.com/example/notepad/)\n\n## 功能说明\n\n- 支持回车添加事件\n- 支持事件状态切换\n\t- 添加事件 -\u003e 进入未完成列表\n\t- 未完成 -\u003e 已完成(勾选checkbox)\n\t- 未完成 -\u003e 已取消(点击取消按钮)\n\t- 已完成 -\u003e 未完成(取消勾选checkbox)\n\t- 已取消 -\u003e 未完成(点击恢复按钮)\n- 支持筛选事件\n- 支持编辑事件\n- 支持删除事件\n- 支持清空所有事件\n- 支持本地化存储\n- 支持折叠面板\n- 支持切换主题颜色 :sparkles:\n- 支持导出/导入数据\n\n## 安装步骤\n本项目是使用vue-cli脚手架生成的项目，项目代码可以到我的github上clone下来。clone下来之后可进入文件目录\n\n\tgit clone https://github.com/lin-xin/notepad.git\n\tcd notepad\n\tnpm install\n\tnpm run dev\n\n\t// 如果 node-sass 安装失败，可使用 cnpm 安装\n\tnpm install cnpm -g --registry=https://registry.npm.taobao.org\n\tcnpm -v \t\t\t// 查看cnpm版本号确认安装成功\n\tcnpm install node-sass -D\n\t\n\t//安装成功后再看看是否可以正确运行了\n\n## 功能截图\n\n![image](https://raw.githubusercontent.com/lin-xin/notepad/master/screenshots/3.gif)\n![image](https://raw.githubusercontent.com/lin-xin/notepad/master/screenshots/2.gif)\n\n## 主要难点\n\n### 1.折叠面板\n\n难点：点击折叠面板title,要动画实现sliderUp和sliderDown，但是div高度auto，使用transition： height .3s无效。\n\n解决方法：点击时候获取div高度值，赋值给style.height，然后再改变高度为0，这样transition才会生效。\n\n### 2.切换状态\n\n难点：在不同的状态间切换，实时地把事件在不同状态列表中显示出来\n\n解决方法：利用vuex进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。\n关于vuex在该项目中更详细的应用可查看文章：[Vuex 模块化实现待办事项的状态管理](https://github.com/lin-xin/blog/issues/5)\n\n### 3.本地存储\n\n知识点：localStorage是HTML5提供的一种在客户端存储数据的新方法，没有时间限制，第二天、第二周或下一年之后，数据依然可用。\n\n用法：\n\n\t1）存储数据：localStorage.setItem(item, value)\n\t2）获取数据：localStorage.getItem(item)\n\t3）移除数据：localStorage.removeItem(item)\n\n\n### 4.父子组件间的通讯\n\t\n知识点：组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。\n\n\t1）父组件可以使用 props 把数据传给子组件。\n\t2）子组件可以使用 $emit 触发父组件的自定义事件。\n\n\n### 5.筛选功能\n\n功能描述：可根据 类型 和 关键词 进行筛选\n\n知识点：在返回所有事件的计算属性上，使用过滤器( filter )，进行对 type 和 content 的筛选，返回符合条件的事件。\n\n### 6.切换主题\n\n功能描述：通过点击选中的颜色，改变整个记事本的主题风格，并永久保存。\n\n知识点：使用vuex管理主题状态，并进行模块化管理，用localStorage永久存储选中的主题颜色。\n\n### 7.数据的导出和导入\n\n## 总结 ##\n\n虽然只是做了个小小的记事本，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固。这个记事本只做了一个页面，就没有用vue-router，路由也是vue里很强大的功能。\n做这个记事本的初衷，是因为在工作中，我都会把最近要做的事情给记在本子上，完成之后就会打钩，所以想把这个给放到电脑上去实现。","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flin-xin%2Fnotepad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flin-xin%2Fnotepad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flin-xin%2Fnotepad/lists"}