介紹
這是一個零食商城,原型來自一個慕課網的小程式,前段時間看別人用React Native寫過一個迷你水果商城的時候發現了這個小程式,最近有空了,就用vue去實現一下。 UI方面採用了vux元件庫,資料服務由easy-mock偽造,vuex實現購物車的狀態管理,主要就是這些,作為一個入門級的實踐,有興趣的小夥伴可以看看。
線上DEMO:
線上演示戳我(請使用chrome開發者手機演示模式預覽)
效果截圖
技術棧
- vue-cli
- vue2
- vue-router
- vuex
- vux
- axios
- less
- eslint
- easy-mock
目錄結構
├── README.md
├── build // 構建服務和webpack配置
├── config // 專案不同環境的配置
├── dist // 專案build目錄
├── server // express伺服器
├── index.html // 專案入口檔案
├── package.json // 專案依賴包配置檔案
├── src
│ ├── common // 公用的js檔案和css樣式
| ├── components // 各種通用元件
| ├── pages // 主要頁面
│ ├── router // 路由相關檔案
│ ├── store // vuex相關檔案
│ ├── assets // 圖片資原始檔
│ ├── App.vue // 根元件
│ └── main.js // webpack預編譯入口
├── static // 靜態資原始檔
複製程式碼
安裝與執行
# 安裝依賴
npm install
# 啟動服務 (http://localhost:8080)
npm run dev
# 打包
npm run build
# 分析打包檔案
npm run build --report
複製程式碼
最後
本專案僅為學習交流使用,如有類同,純屬巧合。
GitHub地址:戳這裡
喜歡的話就點個star吧! ^_^