update File

一个用于快速更新和安装常用文件模板的 CLI 工具

� 简介

update File 是一个命令行工具，旨在帮助开发者快速更新和安装项目中的常用文件模板。目前支持以下文件：

• request.js - 基于 Axios 的 HTTP 请求封装
• usePage.js - 基于 Vue 3 的分页列表管理 Composable

✨ 特性

• 🚀 快速安装常用文件模板
• 📁 自动创建目标目录
• ⚠️ 智能覆盖提示，避免误操作
• 🎯 交互式选择界面
• � 即插即用，无需额外配置

📦 安装

全局安装

npm install -g update-file

本地安装

npm install update-file

🚀 使用方法

全局安装后使用

update-file

本地安装后使用

npx update-file

一键更新（推荐）

在宿主项目的 package.json 中添加自定义脚本，实现一键更新包和文件：

配置步骤

1. 在宿主项目的 package.json 中添加以下脚本：

{
  "scripts": {
    "update-files": "npm install update-file && npx update-file"
  }
}

2. 运行命令：

npm run update-files

这个命令会：

• ✅ 自动安装/更新 update-file 包
• ✅ 自动运行文件更新工具
• ✅ 显示交互式选择界面
• ✅ 更新选定的文件

高级配置

如果你只想更新特定文件，可以创建更具体的脚本：

{
  "scripts": {
    "update-all": "npm install update-file && npx update-file --all",
    "update-request": "npm install update-file && npx update-file --request",
    "update-usepage": "npm install update-file && npx update-file --usepage"
  }
}

注意：目前 CLI 工具还不支持 --all、--request、--usepage 参数，这些是示例。如果需要这个功能，可以修改 CLI 工具添加命令行参数支持。

使用流程

1. 运行命令后会显示交互式选择界面
2. 使用空格键选择要安装/更新的文件
3. 确认后工具会自动处理文件安装

只安装单个文件

如果你只想安装 usePage.js 文件，按照以下步骤操作：

# 运行命令
update-file

# 在交互界面中：
# 1. 使用方向键移动光标到 "usePage.js (Pagination Composable)"
# 2. 按空格键只选中 usePage.js（取消选中 request.js）
# 3. 按回车确认

# 选择界面示例：
# ( ) request.js (HTTP Client)
# (*) usePage.js (Pagination Composable)  <- 只选中这个

注意事项：

• usePage.js 依赖 request.js，建议先安装 request.js
• 如果你已经有自己的 HTTP 请求封装，可以只安装 usePage.js
• 确保你的项目中已安装 Vant 4：npm install vant

只安装 request.js

如果你只想安装 request.js 文件：

# 运行命令
update-file

# 在交互界面中：
# 1. 使用方向键移动光标到 "request.js (HTTP Client)"
# 2. 按空格键只选中 request.js（取消选中 usePage.js）
# 3. 按回车确认

# 选择界面示例：
# (*) request.js (HTTP Client)  <- 只选中这个
# ( ) usePage.js (Pagination Composable)

注意事项：

• 确保你的项目中已安装 Axios：npm install axios
• 如果使用环境变量，需要配置 Vite 环境变量文件

📁 文件说明

request.js

HTTP 请求封装，基于 Axios 实现，提供以下功能：

• 请求/响应拦截器
• 自动添加 Token 认证
• 支持多种请求方式（GET/POST/JSON/Form/文件上传/下载）
• 统一的错误处理

安装位置：src/utils/request.js

主要方法：

• Request.http() - 通用 HTTP 请求
• Request.getForm() - GET 表单请求
• Request.postForm() - POST 表单请求
• Request.getJson() - POST JSON 请求
• Request.postJson() - POST JSON 请求
• Request.imp() - 文件上传
• Request.exp() - 文件下载

usePage.js

分页列表管理 Composable，基于 Vue 3 Composition API，提供以下功能：

• 列表数据加载和分页
• 下拉刷新和上拉加载
• 查询参数管理
• 数据操作（删除、复制）
• 表单操作（新增、编辑）
• 数据导出

安装位置：src/composables/usePage.js

主要功能：

• 自动管理加载状态
• 支持无限滚动和分页
• 集成 Vant 组件（van-list、van-pull-refresh）
• 统一的错误处理
• 灵活的配置选项

🔧 配置要求

request.js 依赖

• Axios
• Vite（用于环境变量）
• 自定义 storage 模块（@/utils/storage）

usePage.js 依赖

• Vue 3
• Vant 4
• request.js（需要先安装）

📋 使用示例

示例 1：首次安装

# 在项目根目录运行
update-file

# 选择要安装的文件
# [x] request.js (HTTP Client)
# [x] usePage.js (Pagination Composable)

# 工具会自动创建目录并安装文件

示例 2：只安装 usePage.js

# 场景：你已经有自己的 HTTP 请求封装，只需要 usePage.js

# 1. 确保已安装 Vant 4
npm install vant

# 2. 运行安装命令
update-file

# 3. 在交互界面中：
#    - 使用方向键移动到 "usePage.js (Pagination Composable)"
#    - 按空格键选中
#    - 确保没有选中 "request.js (HTTP Client)"
#    - 按回车确认

# 4. 工具会自动创建 src/composables 目录并安装 usePage.js

# 5. 在你的代码中使用
import { usePage } from '@/composables/usePage'

重要提示：如果你只安装 usePage.js，需要确保你的项目中有一个兼容的 HTTP 请求工具。usePage.js 默认使用 @/utils/request，你可以：

• 修改 usePage.js 中的导入路径
• 或者创建一个兼容的 @/utils/request.js 文件

示例 3：只安装 request.js

# 场景：你只需要 HTTP 请求封装，不需要分页功能

# 1. 确保已安装 Axios
npm install axios

# 2. 运行安装命令
update-file

# 3. 在交互界面中：
#    - 使用方向键移动到 "request.js (HTTP Client)"
#    - 按空格键选中
#    - 确保没有选中 "usePage.js (Pagination Composable)"
#    - 按回车确认

# 4. 工具会自动创建 src/utils 目录并安装 request.js

# 5. 在你的代码中使用
import { Request } from '@/utils/request'

示例 4：更新已有文件

update-file

# 如果文件已存在，会提示是否覆盖
# ⚠️  File request.js already exists. Overwrite? (y/N)

示例 3：在 Vue 项目中使用

// 在组件中使用 usePage
import { usePage } from '@/composables/usePage'

export default {
  setup() {
    const { 
      desserts, 
      loading, 
      finished, 
      onLoad, 
      onRefresh,
      search 
    } = usePage({
      list: '/api/user/list',
      delete: '/api/user/delete',
      pageSize: 20
    })

    return {
      desserts,
      loading,
      finished,
      onLoad,
      onRefresh,
      search
    }
  }
}

// 使用 request 发送请求
import { Request } from '@/utils/request'

// GET 请求
Request.getForm('/api/user/list', { page: 1 })

// POST JSON 请求
Request.postJson('/api/user/create', { name: 'John' })

// 文件上传
Request.imp('/api/upload', formData)

// 文件下载
Request.exp('/api/export', { type: 'excel' })

🛠 开发

本地开发

# 克隆仓库
git clone <repository-url>
cd Vant-file

# 安装依赖
npm install

# 本地链接
npm link

# 测试命令
update-file

项目结构

update-file/
├── bin/
│   └── index.js          # CLI 入口文件
├── templates/
│   ├── request.js        # HTTP 请求模板
│   └── usePage.js        # 分页管理模板
├── package.json          # 项目配置
└── README.md            # 项目说明

📝 版本管理

# 更新版本号
npm version patch    # 1.0.0 -> 1.0.1 (补丁版本)
npm version minor    # 1.0.1 -> 1.1.0 (次要版本)
npm version major    # 1.1.0 -> 2.0.0 (主要版本)

# 测试包内容
npm pack --dry-run

# 发布到 npm
npm publish

� 故障排除

问题：命令找不到

解决方案：

• 确认已正确安装：npm install -g update-file
• 检查 npm 全局路径：npm config get prefix
• 尝试使用 npx：npx update-file

问题：文件已存在但无法覆盖

解决方案：

• 手动删除目标文件后再运行
• 确认有写入权限

问题：依赖缺失

解决方案：

• request.js 需要 Axios：npm install axios
• usePage.js 需要 Vant 4：npm install vant

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

ISC

� 相关链接

• Axios 文档
• Vue 3 文档
• Vant 4 文档