使用Nuxt3开发一个工具箱

1. 前言

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

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

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

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

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

1.1. 页面截图

首页：

工具列表：

工具详情：

暗黑模式：

2. 技术方案

没有后台系统

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

3. 功能特性

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

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

功能：

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

性能：

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

4. 挖坑画饼

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

 

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

 

参考的优秀产品，比如：

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

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