這個項目是高仿餓了么，技術棧選用

vue1 + vue-router1 + vue-cli1 + vue-resource + stylus + flex布局 + es6 + eslint + webpack2

頁面相對簡單，所以沒有用到vuex， 它更適合對複雜的單頁面進行狀態管理。

1.項目結構分析

common/---- 文件夾存放的是通用的css和fonts
components/----文件夾用來存放我們的 Vue 組件
router/----文件夾存放的是vue-router相關配置（linkActiveClass,routes註冊組件路由）
build/----文件是 webpack 的打包編譯配置文件
config/----文件夾存放的是一些配置項，比如我們伺服器訪問的埠配置等
dist/----該文件夾一開始是不存在，在我們的項目經過 build 之後才會產出
prod.server.js----該文件是測試是模擬的伺服器配置，用來運行dist裡面的文件，在config/index.js中,build對象中添加一條埠設置port：9000，
App.vue----根組件，所有的子組件都將在這裡被引用，eventHub空實例是用來組件間通信的中央數據匯流排作用，主要連接購買控制項和購物車組件之間的數據通信
index.html----整個項目的入口文件，將會引用我們的根組件 App.vue
main.js----入口文件的 js 邏輯，在 webpack 打包之後將被注入到 index.html 中

2.開發過程問題匯總

  • 圖標icon.css--文字圖標樣式，通過icommon.io網站 將svg圖片轉成文字圖標樣式
  • 一像素邊框問題，當樣式像素一定時,因手機有320px,640px等.各自的縮放比差異,所以設備顯示像素就會有1Npx，2Npx.為保設計稿還原度,解決就是用media + scale.

公式：設備上像素 = 樣式像素 * 設備像素比
屏幕寬度： 320px 480px 640px
屏幕寬度： 320px 480px 640px
設備像素比： 1 1.5 2

  • header組件的詳情頁採用sticky-footer布局，主要特點是如果內容不夠長，頁腳部分也會貼在視窗底部，內容足夠長，就會將頁腳推到內容底部，父級position:fixed,內容設為padding-bottom:64px，頁腳相對定位，margin-top:-64px
  • 大多採用flex布局
  • filter：blur(10px),注意，所有在內的子元素也會模糊，包括文字，所以採用定位布局，背景單獨佔用一個層，ios有一個設置backdrop-filter:blur(10px)，只會模糊背景,但不支持android
  • 在購買控制項中使用transition過渡效果，實現添加減少按鈕的動效，和小球飛入購物車的動效（模仿貝塞爾曲線的效果）
  • css預處理器--stylus
  • eslint各種報錯，各種揪心，不過這也是個學習的過程
  • vue2相較vue1有很多地方改動

1.v-for的書寫格式，多出：key值，而且必須寫
2.transition書寫格式不在是在元素標籤上寫，而是作為一個標籤<transition></transition >將目標元素包起來,過渡狀態變為4種狀態
3.v-el 和 v-ref 都棄用，改為使用ref屬性為元素或組件添加標記，通過$refs獲取

  • vue-router2 和vue-router1也有一些區別，可以上官網對比看看

3.學習參考

  • vue2.0官網： vuefe.cn/v2/guide/
  • webpack官網：webpack
  • vue-resoure官網：pagekit/vue-resource
  • vue-router官網：vuejs/vue-router
  • better-scroll插件使用：github.com/ustbhuangy
  • stylus： stylus中文文檔 &amp;quot; 綜述 &amp;quot; 張鑫旭-鑫空間-鑫生活
  • es6：ECMAScript 6入門
  • Sticky footers：CSS秘密花園： Sticky footers
  • 設備像素比：設備像素比devicePixelRatio簡單介紹 &amp;quot; 張鑫旭-鑫空間-鑫生活
  • Flex彈性布局：Flex 布局教程：語法篇 - 阮一峰的網路日誌
  • localStorage本地存儲：localStorage使用總結 - 謝燦勇 - 博客園
  • 模仿貝塞爾曲線的效果： cubic-bezier.comcubic-bezier.com
  • eslint官網：ESLint - Pluggable JavaScript linter
  • cssreset官網： 2015&amp;#x27;s most common CSS Resets to copy/paste, with documentation / tutorials

備註：

  • 項目github源碼地址:github.com/ustbhuangyi/
  • 項目演示：sell
  • 本文參考：仿餓了么項目-vue的學習筆記總目錄 - Keep Learning - SegmentFault
  • 課程視頻：Vue.js高仿餓了么外賣App （想要的，可留下郵箱，在下會分享給你的~~）

推薦閱讀：

相关文章