基于Vue3开发的开发者在线工具(附nginx部署步骤)

0 阅读3分钟

在日常开发中,我们经常需要进行 JSON 格式化、Base64 编解码、时间戳转换或 JWT 解析。虽然市面上有很多在线工具,但大多充满广告、加载缓慢,甚至存在隐私泄露风险。 IT-Tools 是一款在 GitHub 上斩获 20k+ Star 的开源项目,它将开发者高频使用的几十种工具集成到了一个极致丝滑的单页应用中。

工具预览 dev.fktool.com

一、 技术架构:为什么它如此丝滑?

IT-Tools 不仅仅是工具的堆砌,其底层架构体现了现代前端开发的最佳实践: Vue 3 + TypeScript:利用组合式 API(Composition API)保证了工具逻辑的高复用性和强类型安全。 Vite:作为构建工具,提供了极快的冷启动速度和热更新体验。 Naive UI:界面优雅且支持深度定制,提供了极佳的视觉一致性。 PWA (Progressive Web App):通过我们之前提到的 sw.js(Service Worker),支持全离线使用。一旦加载,断网也能正常运行,体验接近原生桌面应用。 模块化设计:每个工具都是一个独立的组件,通过懒加载技术,只有在点击对应工具时才会加载相关资源,确保首屏加载速度。

二、 核心功能亮点

IT-Tools 涵盖了 100+ 种功能,分为以下几大类: 加密/解密:Token 生成器、哈希计算(SHA、MD5)、Bcrypt 验证、AES 加解密。 转换工具:JSON 转 YAML/CSV、Base64 文件转换、颜色格式转换、进制转换。 网络工具:IPv4/v6 子网计算、HTTP 状态码查询、URL 编解码、MAC 地址生成。 开发辅助:Crontab 表达式生成、Git 备忘录、Docker Run 命令转 Compose、正则表达式测试。 数据生成:假数据生成(Faker)、UUID 生成、Lorem Ipsum 占位符。

三、 部署步骤:如何拥有私有版本?

IT-Tools 提供了极简的部署方案,你可以根据需求选择:

  1. 使用 Docker 部署(推荐,仅需 10 秒) 这是最快的方式,非常适合在自己的服务器或 NAS 上运行:
bash
docker run -d \
  --name it-tools \
  --restart unless-stopped \
  -p 8080:80 \
  corentinth/it-tools:latest

访问 http://localhost:8080 即可开始使用。 2. 手动构建部署(适合二次开发) 如果你想修改源码或增加自己的工具,可以按照以下步骤操作:

克隆仓库:
bash
git clone https://github.com
cd it-tools

安装依赖(推荐使用 pnpm):

bash
pnpm install

开发调试:

bash
pnpm dev

打包构建:

bash
pnpm build

构建完成后,将 dist 目录下的内容上传到 Nginx、Vercel 或 Netlify 即可。

四、 总结

IT-Tools 的魅力在于其“纯净”与“效率”。它不依赖后端,所有数据处理都在用户的浏览器本地完成,极大地保护了敏感数据(如密钥、JSON 日志等)的隐私。 如果你厌倦了那些杂乱的在线转换网站,不妨基于 IT-Tools 的 GitHub 源码 搭建一套专属于你或团队的工具站。