基於vue全家桶實現的簡易商城

你別說話我嫌煩啊發表於2018-01-23
Vue

介紹

這是一個零食商城，原型來自一個慕課網的小程式，前段時間看別人用React Native寫過一個迷你水果商城的時候發現了這個小程式，最近有空了，就用vue去實現一下。 UI方面採用了vux元件庫,資料服務由easy-mock偽造，vuex實現購物車的狀態管理，主要就是這些，作為一個入門級的實踐，有興趣的小夥伴可以看看。

線上DEMO：

線上演示戳我（請使用chrome開發者手機演示模式預覽）

效果截圖

基於vue全家桶實現的簡易商城

技術棧

  • 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吧！ ^_^

相關文章