Vue2.0仿餓了么webapp單頁面應用


Vue2.0仿餓了么webapp單頁面應用


聲明: 代碼源於 黃軼老師在慕課網上的教學視頻,我自己用vue2.0重寫了該項目,喜歡的同學可以去支持老師的課程:http://coding.imooc.com/class/74.html


源代碼地址:https://github.com/ColinScales/shell

演示地址:https://colinscales.github.io/scale

手機掃碼查看效果:

演示.png


## 技術棧:vue-cli   webpack   axios    vue-router    stylus    express     better-scroll


部分截圖

路由展示

商品分類及添加購物

商品詳情及購物車

安裝&&運行:

1、安裝  node:http://nodejs.cn/download/ 

      安裝  git:https://git-scm.com/downloads

2、從我的倉庫克隆代碼:

git clone https://github.com/ColinScales/shell

3、安裝vue腳手架工具vue-cli:

npm install vue-cli -g

4、進入代碼根目錄安裝依賴:

npm install --save-dev

5、運行命令:

npm run dev

打開瀏覽器查看運行效果

6、發布代碼:

npm run build

發布完代碼后會生成dist目錄,保存着項目的所有可運行的代碼。

注意不能直接打開index.html運行,需要開啟http server運行代碼。 直接運行我寫好的配置文件就可以運行代碼:

node prod.server.js

打開瀏覽器輸入localhost:4444看build后的運行效果。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM