使用Nuxt3开发一个工具箱

使用Nuxt3开发一个工具箱

2024年01月11日 阅读:38 字数:616 阅读时长:2 分钟

使用Nuxt.js 3开发了一个免费的工具网站,所有数据操作都在客户端完成。

1. 前言

网上的工具箱有很多,为啥还要自己开发一个呢?

  • 网上部分工具箱不是免费使用的,需要登录或者有各种限制;
  • 很多工具需要把数据上传到服务器再进行处理,对于有些要注意数据安全的情况不太友好,想试试纯Javascript能达到什么程度;
  • 更多是服务我自己吧,优先开发那些常用或者容易的。
  • 这是独立开发的第三个应用了,当做练练手。
  • 摸索下自由职业的道路。

由于要考虑SEO需要用到服务端渲染,也没有搭建后台程序的计划,于是直接用Nuxt.js来搭建。

网址:Toolbox - 一个安全免费的工具箱

经过一个多月以来,工作日的晚上以及周末的时间,一共开发了60+工具,实现了基础的功能。

1723ef48521229ad.png aa469c5b5351e36d.png

1.1. 页面截图

首页:

ded9422444ab12b9.png

工具列表:

2a8bd8aa79b36c15.png

工具详情:

dd035bfa75f1ec2a.png

暗黑模式:

4de641b489e03ea9.png

2. 技术方案

没有后台系统

  • 框架:Nuxt.js@3
  • UI:ElementPlus
  • Typescript + Vue@3
  • 文件导出:file-saver、jszip
  • 评论功能:waline
  • 以及各种工具使用的npm包

3. 功能特性

安全:所有处理均在您浏览器的 JavaScript 中进行,数据不会离开您的电脑。

免费:没有后台程序和用户系统,所有工具免费试用,无需登录或关注公众号。

功能:

  • 响应式界面
  • 收藏:因为没有用户系统,所以基于浏览器存储,数据无法云端存储和同步。
  • 评论和工具反馈
  • 暗黑模式
  • 文本工具
  • 多媒体工具:图片,音视频的看浏览器执行效率如何
  • 生活工具
  • 数学工具:数字相关、单位换算
  • 开发工具
  • 编码转换

性能:

页面比较简单,默认的分包构建策略。开启HTTP/2+Gzip就可以达到一百昏。

7f1915e48f4aa83b.png

4. 挖坑画饼

  • 更多工具
  • 给每个工具添加说明,实现方法
  • 国际化
  • 单元测试
  • 快速复制粘贴
  • 支持页面嵌入:根据URL参数去除外部容器,只保留工具核心部分,设置暗色模式、语言等

 

🤣 希望能坚持做下去吧,不要像之前开发的“浏览器首页”网站那样就存活了几个月~ 

 

参考的优秀产品,比如:

更适合开发者的:https://portal.he3app.com/home/category

更多工具的:https://www.67tool.com/

推荐阅读

恰饭区

评论区 (0)

0/500

还没有评论,快来抢第一吧