vue電商實戰項目

原創

@小傲哥哥

2020-06-16 13:54

項目地址：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格式