vue電商實戰項目

項目地址:https://github.com/sirfuao/vue_shop.git

順便附上,微信小程序的地址:https://blog.csdn.net/fuao/weChat

1、項目描述

1、此項目爲一個前後端分離的 電商實戰項目
2、採用了Vue全家桶+ES6+Webpack 等前端最新技術
3、項目包括商家、商品、用戶、等多個功能子模塊
4、採用模塊化、組件化、工程化的模式開發

2、你能從此項目中學到什麼?

2.1 項目開發流程及開發方法和思想

1、熟悉一個項目開發的流程
2、學會組件化、模塊化、工程化的開發模式
3、掌握使用vue-cli腳手架初始化vue.js項目
4、學會ES6+eslint 的開發方法
5、掌握一些項目的優化技巧

2.2 插件或第三方庫

1、學會使用 vue-router 開發單頁面
2、學會使用 axios 的封裝和後端數據交互
3、學會使用 vuex 管理應用組件的狀態
4、學會是使用 better-scroll 實現頁面滑動效果
5、學會使用 vant-ui 組件庫構建界面
6、學會使用 vue-lazyload 實現圖片懶加載

這個項目非常適合缺少實戰經驗的小夥伴學習,可用來提升對vue工程化,模塊化,組件化更好的理解以及它的思想,如果您覺得對您有什麼幫助,請在github上給個 star,非常感謝!

關於截圖頁面中的那個綠色的小標 vConsole 是一個手機上的調試插件,也是實際工作中必不可少的一個插件,打開後可以看到對應的網絡請求和數據返回的結果;

項目文件

vue-cli3/4 的項目文件目錄
目錄/文件 說明
dist 項目打包後生成的文件
node_modules npm加載的項目依賴模塊
public 靜態資源目錄,如圖片、字體、icon圖標 ,其中裏面的index.html是模板,當運行npm run build打包的時候,就是以這裏的index.html作爲模板打包 輸出 到dist 文件夾下生成一個新的 index.html文件
src 包含了如下幾個目錄及文件:
assest: 放置一些圖片,如logo等
components: 這裏我一般用來放置一些公共的組件
App.vue:應用組件,我們寫的所有組件都是在這個組件之上運行的
main.js: 項目的核心文件,入口js文件
router: 路由文件夾,決定頁面路由的跳轉規則
store: vuex的狀態管理文件
network:自己創建的,用來存放項目中發起請求的js文件模塊
pluginunit:自己創建的,用來存放項目中所使用到的ui插件的js文件
common: 存放一些公共的js文件 比如, rem.js 用來解決移動端適配問題的
package.json 項目的配置文件,以及一些插件依賴包的信息
package-lock.json 插件依賴的詳細信息
babel.config.js 用來配置一些ui插件
README.md 項目的說明文檔,markdown格式

項目截圖

首頁

在這裏插入圖片描述

圖二

在這裏插入圖片描述

分類頁

在這裏插入圖片描述

圖二

在這裏插入圖片描述

詳情

在這裏插入圖片描述

圖二

在這裏插入圖片描述

圖三

在這裏插入圖片描述

購物車

在這裏插入圖片描述

購物車爲空時

在這裏插入圖片描述

我的

在這裏插入圖片描述
如果有什麼做的不足的地方,歡迎各位大佬指教,也歡迎各位大佬留言以後一起學習!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章