此项目出发点用于朋友实际库存管理的需求定制的,对于我本人,同时也是作为Vue2
的首个练手项目,更好实践前端开发的工程化。
也是因为此项目基于真实需求定制的,所以此项目也对应着一个后端项目(下面会放项目传送门),也是我个人完成的,后端项目基于Node
的Express
框架搭建,数据库使用的Mysql
。对于只学习此前端项目的伙伴,项目默认采用的是远程后端服务器,接口文档传送门放在了下面(基于ApiFox的在线文档)。对于想使用本地后端服务的伙伴,可以参考后端项目。
此项目主要使用Vue
、Vuex
、Vue-router
全家桶,UI使用的Element-Ui
,构建工具使用的是Vue-cli
。当然也有基于webpack构建的工程,想了解可以切换到Webpack
分支,具体里面的配置,请看Webpack
分支下的README
此项目会长期维护,如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 👍。
PS:远程服务器只是提供测试,后端没有做太多的限制过滤校检的,大家轻点玩,服务器玩崩了,我又要手动重启,很麻烦啦~
-
项目在线演示地址::link:使劲点我 (默认账号密码root,root,域名再备案中,ip访问有点满,做了懒加载,会很慢~)
-
项目提供远程接口文档地址::link:使劲点我
-
配套的后端项目地址: 🔗使劲点我
技术 | 说明 | 版本 | 官网 |
---|---|---|---|
Vue | 渐进式 JavaScript 框架 | 🔗https://vuejs.org/ | |
Vue-router | 路由管理 | 🔗https://router.vuejs.org/ | |
Vuex | 全局状态管理 | 🔗https://vuex.vuejs.org/ | |
Element-Ui | UI框架 | 🔗https://element.eleme.io | |
Axios | 基于 promise 的网络请求库 | 🔗https://www.axios-http.cn/ | |
ECharts | 可视化图表库 | 🔗https://echarts.apache.org/ | |
Less | 向后兼容的 CSS 扩展语言 | 🔗https://less.bootcss.com/ |
开发环境:Windows、Node(v16.18.0)、Npm(v8.19.2)
技术功能
- ✅路由懒加载
- ✅权限控制(Token)
- ✅数据可视化展示
- ✅基于Axios请求、响应拦截控制、统一管理请求
- ✅基于Vuex统一管理可复用、复杂的的状态数据
- ✅包屑、组件缓存、全局记录缓存
- ❌依赖用户权限动态生成路由、导航栏
- ❌响应式布局
- ✅打包优化(提供webpack分支)
- 未完待续..
业务功能
-
数据可视化
- ✅基本信息概述
- ✅库存类别分析
- ✅销售额、成本、利润统计
- ✅完成订单统计
-
入库
- ✅添加入库
- ✅入库记录条件查询
-
出库
- ✅添加出库
- ✅出库记录条件查询
- ✅变更出库状态
-
客户管理
- ✅添加客户
- ✅编辑客户
-
用户管理
- ❌权限控制
- ❌信息修改
1️⃣拉取项目文件
git clone https://github.com/Hyrmm/wms-client
2️⃣切换到项目目录
cd wms-client
3️⃣安装依赖包
npm install
4️⃣运行项目
-
使用远程在线后端服务接口
npm run serve
-
使用本地后端服务接口,需要配合后端项目传送门
npm run local
├── src
│ ├── App.vue
│ ├── api
│ ├── assets
│ ├── components
│ │ ├── AgentFail
│ │ ├── Breadcrumb
│ │ ├── PagiNation
│ │ ├── TableFilter
│ │ └── ViewFilter
│ ├── main.js
│ ├── mixin
│ ├── pages
│ │ ├── home
│ │ └── login
│ ├── router
│ ├── store
│ ├── utils
│ └── view
│ ├── Client
│ │ ├── Add
│ │ ├── Modify
│ │ └── index.vue
│ ├── Setting
│ ├── Store
│ ├── StoreIn
│ │ ├── Add
│ │ ├── Recording
│ │ └── index.vue
│ ├── StoreOut
│ │ ├── Add
│ │ ├── Modify
│ │ ├── Recording
│ │ └── index.vue
│ └── index
│ │ ├── Order.vue
│ │ ├── Recording
│ │ └── index.vue
│ ├── StoreOut
│ │ ├── Add
│ │ ├── Modify
│ │ ├── Recording
│ │ └── index.vue
│ └── index
│ ├── Order.vue
│ ├── Sales.vue
│ ├── Store.vue
│ └── index.vue
├── jsconfig.json
├── package-lock.json
├── package.json