Vue實戰篇（PC端商城項目）

這是一個基於vue全家桶+node.js+express+mysql實現的商城網站

項目github地址：vueMall

查看demo:地址

若是以爲對您有幫助，您能夠在左下角給我個喜歡支持一下，謝謝！

項目結構

以下圖所示：

注：該項目是真實的請求後臺api。server爲後端數據接口項目結構，運行時能夠單獨拿出來放在wamp/www下或者xammp/htdocs 這兩是集成包（apache+php+mysql...）沒用過的小夥伴能夠百度學習學習很容易的。固然你也能夠本身單獨配置Mysql環境，這個看我的習慣。鏈接Mysql代碼在server/conf/conf.js你們只要將配置信息改爲本身的就行。表建立sql語句在server/malldata.sql文件內你們能夠直接複製插入就ok。個人數據庫名是malldata，你們不同的記得改，不懂的用數據庫的小夥伴們去百度百度很容易的，基本的增刪改查會就夠了。

項目運行

# 克隆到本地：
https://github.com/wzz5304/vueMall.git

# 安裝依賴：
vue:
....
cd vueMall-master(進入項目文件下)
npm install （安裝依賴）

express:(進入項目文件下)
cd server
npm install（安裝依賴）

# 本地開發，開啓服務器，瀏覽器訪問http://localhost:8081,express監聽的是3001端口http://localhost:3001（我改了監聽端口）
vue:
npm run dev

express:
node bin\www

# 構建生產
npm run build
複製代碼

注：第一次使用vue和express的小夥伴記得全局安裝下vue-cli和express

• vue-cli

  鍵入命令：npm install -g vue-cli

• express

  鍵入命令：cnpm i -g express-generator

不懂的改後臺監聽端口的能夠打開查看，對你有幫助記得給個愛心哦，謝謝！

項目說明

• 用到的技術棧

  vue-cli2 + vue2.0 + vue-router + vuex + axios + stylus + scss + node.js + es6 + express + mysql

• 實現功能

- 登陸註冊
    - 商品詳情
    - 購物車管理
    - 地址管理
    - 模擬支付（因爲調用不了支付接口）
    - 訂單管理
    
複製代碼

• 功能說明

- 基於vue2.0
    - 使用vue-cli腳手架搭建項目
    - 使用vue-router實現路由切換
    - 使用vuex進行狀態管理
    - 使用axios進行數據請求
    - stylus和scss編寫樣式
    - 聯動滾動藉助了vue-infinite-scroll插件和圖片懶加載vue-lazyload插件
    - Express編寫後臺api
    - Mysql實現數據存儲
複製代碼

學習參考

• vue2.0官網 vuefe.cn/v2/guide/
• npm www.npmjs.com/
• ES6 es6.ruanyifeng.com/
• Sticky footers juejin.im/post/5a52d6…
• awesome-vue github.com/vuejs/aweso…