wms client

前言

此項目出發點用於朋友實際庫存管理的需求定制的，對於我本人，同時也是作為Vue2的首個練手項目，更好實踐前端開發的工程化。

也是因為此專案是基於真實需求定制的，所以此專案也對應著一個後端專案（下面會放專案傳送門），也是我個人完成的，後端專案基於Node的Express框架搭建，資料庫使用的Mysql 。對於只學習此前端專案的夥伴，專案預設採用的是遠端後端伺服器，介面文件傳送門放在了下面(基於ApiFox的線上文件)。對於想使用本地後端服務的夥伴，可以參考後端項目。

此專案主要使用Vue 、 Vuex 、 Vue-router全家桶，UI所使用的Element-Ui ，建置工具使用的是Vue-cli 。當然也有基於webpack建構的工程，想了解可以切換到Webpack分支，具體裡面的配置，請看Webpack分支下的README

此項目會長期維護，如有問題請直接在Issues 中提，或者您發現問題並有非常好的解決方案，歡迎PR ?。

PS:遠端伺服器只是提供測試，後端沒有做太多的限制過濾校檢的，大家輕點玩，伺服器玩崩了，我又要手動重啟，很麻煩啦~

?傳送門

• 專案線上演示地址? 使勁點我(預設帳號密碼root,root，網域再備案中，ip訪問有點滿，做了懶加載，會很慢~)

• 專案提供遠端介面文檔地址? 使點我

• 配套的後端專案地址? 使點我

?技術棧

科技	說明	版本	官網
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