# v-stock **Repository Path**: Xinqi412/v-stock ## Basic Information - **Project Name**: v-stock - **Description**: 商品管理页面，功能：能够录入商品，查找商品、删除商品，商品列表翻页，导入excel商品数据 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-04-17 - **Last Updated**: 2026-04-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 📦 V-Stock - 商品管理系统 [![Vue 3](https://img.shields.io/badge/Vue-3.5.32-4FC08D?style=flat-square&logo=vue.js)](https://vuejs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-~6.0.2-3178C6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/) [![Vite](https://img.shields.io/badge/Vite-8.0.4-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/) [![ExcelJS](https://img.shields.io/badge/ExcelJS-4.x-217346?style=flat-square&logo=microsoft-excel)](https://github.com/exceljs/exceljs) [![License](https://img.shields.io/badge/License-MIT-green.svg?style=flat-square)](LICENSE) 一个现代化的商品管理系统，基于 Vue 3 + TypeScript + Vite 构建，支持商品的增删改查、搜索、分页以及 Excel 数据的导入导出功能。 ## ✨ 功能特性 ### 🛍️ 商品管理 - ✅ **新增商品** - 支持商品名称、分类、价格、库存、描述等信息录入 - ✅ **编辑商品** - 实时修改商品信息 - ✅ **删除商品** - 安全删除商品记录 - ✅ **商品搜索** - 支持按名称或分类进行实时搜索 ### 📊 数据展示 - ✅ **分页显示** - 支持自定义每页显示数量（5/10/20/50条） - ✅ **数据统计** - 显示当前页码、总页数和记录数 - ✅ **响应式设计** - 适配桌面和移动端设备 ### 📤 Excel 导入导出 - ✅ **导出 Excel** - 一键导出所有商品数据为美化样式的工作簿 - ✅ **导入 Excel** - 支持 .xlsx/.xls/.csv 格式文件导入 - ✅ **智能验证** - 自动检测重复商品并提示处理 - ✅ **数据预览** - 导入前预览和验证数据格式 ## 🛠️ 技术栈 - **前端框架**: Vue 3.5.32 (Composition API) - **开发语言**: TypeScript ~6.0.2 - **构建工具**: Vite 8.0.4 - **Excel 处理**: ExcelJS 4.x + XLSX - **样式**: 原生 CSS (响应式设计) - **包管理**: npm/yarn ## 🚀 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 8.0.0 或 yarn >= 1.22.0 ### 安装依赖 ```bash # 使用 npm npm install # 或使用 yarn yarn install ``` ### 开发环境运行 ```bash # 使用 npm npm run dev # 或使用 yarn yarn dev ``` 访问 http://localhost:5173 查看应用 ### 生产环境构建 ```bash # 使用 npm npm run build # 或使用 yarn yarn build ``` 构建产物将输出到 `dist/` 目录 ### 预览构建结果 ```bash # 使用 npm npm run preview # 或使用 yarn yarn preview ``` ## 📖 使用指南 ### 商品录入 1. 点击 **"+ 新增商品"** 按钮 2. 填写商品信息（名称、分类、价格、库存为必填项） 3. 点击 **"保存"** 完成录入 ### 数据搜索 在搜索框中输入商品名称或分类关键词，系统将实时过滤显示匹配的商品。 ### Excel 导入 1. 准备 Excel 文件（支持 .xlsx/.xls/.csv 格式） 2. 文件格式要求： ``` | 商品名称 | 分类 | 价格 | 库存 | 描述 | |----------|------|------|------|------| | 笔记本 | 电子产品 | 4999 | 10 | 高端商务本 | ``` 3. 点击 **"📤 导入Excel"** 选择文件 4. 系统将自动验证数据并提示处理结果 ### Excel 导出 点击 **"📥 导出Excel"** 按钮，系统将生成包含所有商品数据的 Excel 文件并自动下载。 ## 📁 项目结构 ``` v-stock/ ├── public/ # 静态资源 │ ├── favicon.svg # 网站图标 │ └── icons.svg # 图标文件 ├── src/ │ ├── assets/ # 资源文件 │ │ ├── hero.png # 英雄图 │ │ ├── vite.svg # Vite 图标 │ │ └── vue.svg # Vue 图标 │ ├── components/ # Vue 组件 │ │ ├── HelloWorld.vue # 示例组件 │ │ └── ProductManage.vue # 商品管理组件 │ ├── App.vue # 根组件 │ ├── main.ts # 应用入口 │ └── style.css # 全局样式 ├── dist/ # 构建输出目录 ├── node_modules/ # 依赖包 ├── .gitignore # Git 忽略文件 ├── .vscode/ # VS Code 配置 ├── package.json # 项目配置 ├── tsconfig*.json # TypeScript 配置 ├── vite.config.ts # Vite 配置 └── README.md # 项目说明 ``` ## 🔧 开发配置 ### TypeScript 配置 项目使用严格的 TypeScript 配置，确保类型安全： - `tsconfig.json` - 基础配置 - `tsconfig.app.json` - 应用配置 - `tsconfig.node.json` - Node.js 配置 ### Vite 优化 构建配置已优化以提升性能： - **代码分割**: 将 Excel 处理库单独打包 - **Chunk 大小**: 调整警告阈值适应大型库 - **压缩**: 自动启用 Gzip 压缩 ## 🤝 贡献指南 欢迎提交 Issue 和 Pull Request！ 1. Fork 本项目 2. 创建特性分支: `git checkout -b feature/AmazingFeature` 3. 提交更改: `git commit -m 'Add some AmazingFeature'` 4. 推送分支: `git push origin feature/AmazingFeature` 5. 提交 Pull Request ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ## 👨‍💻 作者 **XinqiEnterspace** - [Gitee](https://gitee.com/XinqiEnterspace) ## 🙏 致谢 - [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架 - [Vite](https://vitejs.dev/) - 下一代前端构建工具 - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集 - [ExcelJS](https://github.com/exceljs/exceljs) - Excel 文件处理库 - [XLSX](https://github.com/SheetJS/sheetjs) - 电子表格解析库 --- ⭐ 如果这个项目对你有帮助，请给它一个 Star！