項目地址: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格式 |
項目截圖
首頁
圖二
分類頁
圖二
詳情
圖二
圖三
購物車
購物車爲空時
我的
如果有什麼做的不足的地方,歡迎各位大佬指教,也歡迎各位大佬留言以後一起學習!