vue全家桶實現一個小商城

RaKL發表於2018-02-22

vue全家桶實現一個小的移動商城

學習了一段時間的react,臨近過年了。想到年後要換工作,就想把之前的vue再看看,畢竟現在版本迭代快。正好又趕上vue-cli 3.0 beta的到來,就順便上手試試吧。完成一個移動小商城的demo,是個新手專案。

倉庫地址

線上預覽 手機掃描二維碼或在電腦上開啟瀏覽器除錯手機模式

二維碼

  • 首先是全域性安裝
npm install -g @vue/cli
// 或
yarn global add @vue/cli
  • 然後生成專案以後可以發現,目錄結構變簡單了。build和config目錄都沒有了,vue-cli依舊使用webpack打包工具只是預設配置好了。只剩下vue-config.js當你需要更改預設配置才會用的到,實際開發者我並沒有使用到。
  • 開發過程中大部分人都會使用模板、樣式預處理。這些也只要安裝相應的依賴。我是使用pug和sass,安裝對應的模板依賴包,打包工具預設已安裝幾乎所有的loader,所以直接用就行了。

專案預覽

專案預覽

專案預覽

專案總結

  • 現在靜態資源(之前老版本腳手架的static目錄)都放在public下。
  • http請求依舊使用axios模擬請求本地資料,輪播圖和彈框使用mint-ui。
  • 購物車資料使用vuex進行管理
  • 一個新手專案希望對你所幫助

最後給個小星星支援下吧

相關文章