A comprehensive collection of developer tools built with Vue 3, TypeScript, and Tailwind CSS. This project provides a clean, modern interface for various development utilities while maintaining high performance and accessibility standards.
- 🌙 Dark Mode: Built-in dark mode support with system preference detection
- 🌍 Multi-language: Support for English and Chinese languages
- 📱 Responsive Design: Optimized for desktop and mobile devices
- 🔒 Privacy First: All processing happens locally - no data leaves your browser
- ⚡ High Performance: Optimized build with code splitting and lazy loading
- 🎨 Modern UI: Clean and intuitive interface with smooth animations
- ♿ Accessibility: Built with accessibility best practices
- JSON Formatter: Format, validate, and beautify JSON data with syntax highlighting
- Base64 Tool: Encode and decode Base64 strings with file support
- MD5 Tool: Generate MD5 hashes for text and files
- URL Tool: Encode and decode URLs and components
- JWT Tool: Decode and validate JSON Web Tokens
- UUID Generator: Generate version 4 UUIDs
- Timestamp Converter: Convert between Unix timestamps and human-readable dates
- Color Picker: Pick colors and get values in different formats
- Color Converter: Convert colors between HEX, RGB, HSL, and HSV formats
- SVG Tool: Optimize, minify, and preview SVG files
- QR Code Generator: Generate QR codes with customization options
- Barcode Generator: Generate various types of barcodes
- GeoHash Tool: Encode and decode geographic coordinates
- Markdown Preview: Preview Markdown with syntax highlighting
- Mermaid Diagram: Create and preview Mermaid diagrams
- Vue 3: Progressive JavaScript framework with Composition API
- TypeScript: Type-safe JavaScript with excellent IDE support
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- Pinia: State management library for Vue
- Vue Router: Official router for Vue.js
- Vue I18n: Internationalization plugin for Vue.js
- Vite: Next-generation frontend tooling
- Heroicons: Beautiful hand-crafted SVG icons
- Clone the repository:
git clone <repository-url>
cd dev-tools- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locally
src/
├── components/ # Vue components
│ ├── common/ # Shared components
│ └── layout/ # Layout components
├── views/ # Page components
│ └── tools/ # Tool-specific views
├── stores/ # Pinia stores
├── router/ # Vue Router configuration
├── locales/ # Internationalization files
├── styles/ # CSS and styling
└── utils/ # Utility functions
- Create a new Vue component in
src/views/tools/ - Add the route to
src/router/index.ts - Add navigation entry to
src/components/layout/Sidebar.vue - Add translations to
src/locales/en.jsonandsrc/locales/zh.json
npm run buildThe built files will be in the dist/ directory. The build is optimized with:
- Code splitting for better loading performance
- Tree shaking to eliminate unused code
- Minification and compression
- Source maps removed for security
- No Source Maps: Source maps are removed in production to prevent reverse engineering
- Local Processing: All tools work offline and process data locally
- Content Security Policy: Optimized for security best practices
- Console Removal: Console logs are stripped in production builds
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is licensed under the MIT License - see the LICENSE file for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
If you have any questions or need help, please open an issue on GitHub.
Made with ❤️ for developers