99 lines
1.6 KiB
Markdown
99 lines
1.6 KiB
Markdown
# 🛠️ 工具箱 - 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` 数组中添加工具信息
|