init

README.md

@@ -1,2 +1,98 @@
-# Toolbox
+# 🛠️ 工具箱 - Toolbox
 
+## 📦 安装
+
+### 前置要求
+
+- Node.js >= 16.0.0
+- npm 或 yarn 或 pnpm
+
+### 安装步骤
+
+1. 克隆项目或下载源码
+
+```bash
+git clone <repository-url>
+cd Toolbox
+```
+
+2. 安装依赖
+
+```bash
+npm install
+# 或
+yarn install
+# 或
+pnpm install
+```
+
+## 🚀 运行
+
+### 开发模式
+
+```bash
+npm run dev
+# 或
+yarn dev
+# 或
+pnpm dev
+```
+
+开发服务器将在 `http://localhost:3000` 启动，并自动在浏览器中打开。
+
+### 构建生产版本
+
+```bash
+npm run build
+# 或
+yarn build
+# 或
+pnpm build
+```
+
+构建产物将输出到 `dist` 目录。
+
+### 预览生产构建
+
+```bash
+npm run preview
+# 或
+yarn preview
+# 或
+pnpm preview
+```
+
+## 📁 项目结构
+
+```
+Toolbox/
+├── src/
+│   ├── views/          # 页面组件
+│   ├── router/         # 路由配置
+│   │   └── index.js
+│   ├── App.vue         # 根组件
+│   ├── main.js         # 应用入口
+│   └── style.css       # 全局样式
+├── index.html          # HTML 模板
+├── vite.config.js      # Vite 配置
+├── package.json        # 项目配置
+└── README.md          # 项目说明
+```
+
+## 🔧 添加新工具
+
+要添加新的工具页面，只需：
+
+1. 在 `src/views/` 目录下创建新的 Vue 组件
+2. 在 `src/router/index.js` 中添加路由配置：
+
+```javascript
+{
+  path: '/your-tool',
+  name: 'YourTool',
+  component: () => import('../views/YourTool.vue')
+}
+```
+
+3. 在 `src/App.vue` 的导航栏中添加链接
+4. 在 `src/views/Home.vue` 的 `tools` 数组中添加工具信息