餓了么 vue 項(xiàng)目總結(jié)
項(xiàng)目效果預(yù)覽 ele效果預(yù)覽
項(xiàng)目源碼地址 ele源碼
跟著慕課網(wǎng)黃軼老師 敲餓了么 vue 項(xiàng)目
作者項(xiàng)目源代碼地址
項(xiàng)目完成之后 npm run build這本來是寫在最后面一段的,我現(xiàn)在把他寫在了最前面,方便我們事先知道,整個(gè)項(xiàng)目做完之后是什么樣子的
項(xiàng)目完成之后在 根目錄 下 npm run build (就是 npm run dev 的那個(gè)目錄)
會(huì)在根目錄下生成一個(gè) dist 目錄,其中包含著 index.html 和一個(gè)css目錄,一個(gè)js目錄
按官方說,這個(gè) dist 目錄必須 http server 環(huán)境下才能運(yùn)行
下個(gè) xampp 在本地服務(wù)下訪問
訪問時(shí)出現(xiàn)了以下幾個(gè)問題:
css js 引用路徑出錯(cuò) (將 cofig目錄下的 index.js 里的 assetsPublicPath:"./" 這樣設(shè)置即可)
由于視頻上是寫了一個(gè) node 后端服務(wù),訪問本地的 data.json 文件,然后用 vue-resource 訪問這個(gè) node 服務(wù)才請求到的接口
打包之后,訪問不到這個(gè) node 服務(wù)了,自然就出錯(cuò)了
如何解決:我在朋友的幫助下,知道了 easy-mock這個(gè)東西,然后 把data.json 文件 用 easy-mock 制作成了 一個(gè) http 接口
后來因?yàn)?github 不能訪問 http 接口,又把 http 改成了 https(我最后打包的項(xiàng)目放在了 gitpages上了)
添加靜態(tài)資源文件,修改 build、dev-serve.js mock模擬數(shù)據(jù),
添加 meta 標(biāo)簽
碰到 換臺(tái)機(jī)器 報(bào)錯(cuò)-沒有 modules ,暫時(shí)解決方法,刪除整個(gè) node_modules,然后重新 npm install
學(xué)習(xí)了 1px 邊框制作(不過感覺用處不大)
編寫 stylus mixin 函數(shù)并在引用
(注意:引入外界stylus樣式文件時(shí):只能用 @import 在style標(biāo)簽里引用
且路徑不可以在 webpack.base.conf.js alias別名)
全局通用樣式,字體文件,圖標(biāo)文件
可以用統(tǒng)一在同級目錄下用一個(gè) index.styl
文件作為出口,在其內(nèi)部 用 @import "./minix.styl" 引入
然后在再 webpack.base.conf.js 統(tǒng)一配置 alias 別名
之后再在 main.js 引入這個(gè) index.styl 文件 即可使用這些樣式文件
如:import "common/stylus/index.styl"
stylus 文件書寫
1.盡量使用類 css 語法即 {}
2.盡量避免拷貝代碼,產(chǎn)生多余的空格縮進(jìn)問題
做完之后好好學(xué)習(xí)一下 flex 布局 display:flex flex:1 完成 header 組件 ,goods組件 完成布局
better-scroll 的用法
better-scroll 實(shí)現(xiàn)列表滾動(dòng)聯(lián)動(dòng)
1. 初始化 better-scroll
_initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper,{
click:true //默認(rèn)派發(fā)點(diǎn)擊事件
});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
click:true,
probeType:3 //實(shí)時(shí)偵測滾動(dòng)
});
},
2. 在 vue 鉤子函數(shù) created 內(nèi) this.$nextTick 回調(diào)里面調(diào)用 better-scroll初始化函數(shù)
菜單欄根據(jù)foodList列表滾動(dòng)實(shí)時(shí)高亮
1. 通過 _calculateHeight 方法動(dòng)態(tài)計(jì)算出 每個(gè)列表的標(biāo)題 的 clientHeight 值,并將其推進(jìn)一個(gè) listHeight 數(shù)組 2. 當(dāng)滾動(dòng) foods 列表時(shí),會(huì)動(dòng)態(tài)計(jì)算出 pos.y 的值, 3. 把這個(gè) pos.y 的值在計(jì)算屬性里判斷 其在 listHeight 數(shù)組中對應(yīng)的 index 值 4. 然后將菜單列表數(shù)組中的 index 值 設(shè)置為高亮
點(diǎn)擊左側(cè)菜單欄,右側(cè) foods 列表實(shí)時(shí)滾動(dòng)到相應(yīng)位置
1. 給 menu-item 綁定一個(gè) setMenu(index) 方法
2. 然后根據(jù)這個(gè) index 獲取foodslist 里面對應(yīng)的 li dom 元素
3. 利用 scrollToElement(el,100) api 自動(dòng)將foodlist滾動(dòng)到合適位置
selectMenu(index) {
// 因?yàn)橛凶詣?dòng)派發(fā)事件,所以需要阻止,
if(!event._constructed) return;
console.log(index);
let foodList = this.$refs.foodList; //通過 $refs.foodList獲取當(dāng)前dom元素
let el = foodList[index];
this.foodsScroll.scrollToElement(el,10);
}
購物車計(jì)算屬性使用
1. 將 item.foods 數(shù)據(jù) 通過 props 屬性傳遞到子組件(cartcontrol組件)
2. 在 cartcontrol 組件內(nèi) 執(zhí)行 addCart、decreaseCart 方法改變 item.foods.count 的值
如果 item.count 值不存在,使用 Vue.set(this.food,"count",1) ;
給foods增加 count 屬性,如果直接增加 count 屬性,不會(huì)產(chǎn)生響應(yīng)式數(shù)據(jù),必須用 Vue.set() 方法
3. 在子組件改變 item.foods對象的值,相應(yīng)的父組件內(nèi)的 item的值會(huì)隨之改變(js復(fù)雜數(shù)據(jù)類型地址引用)
4. 在父組件 goods.vue 利用計(jì)算屬性 動(dòng)態(tài)的生成購物車數(shù)據(jù),然后通過 props屬性傳遞給 shopcart.vue 組件
計(jì)算屬性的計(jì)算出的值為響應(yīng)式數(shù)據(jù)可以直接拿來使用,即在 v-for 中直接遍歷 selectFoods
// 選中的商品即購物車內(nèi)的商品
selectFoods() {
let foods = [];
this.goods.forEach((good) => {
good.foods.forEach((food) => {
if(food.count){
foods.push(food);
}
})
});
console.log(foods);
return foods;
}
cartcontrol 增加和減少商品小球動(dòng)畫
1. 減少商品小球動(dòng)畫
利用 vue transition 組件-過度動(dòng)畫 和 v-show 配合 可以給任何元素和組件添加 entering/leaving過度
條件渲染 (使用 v-if)
條件展示 (使用v-show)
動(dòng)態(tài)組件
組件根節(jié)點(diǎn)
當(dāng)插入或刪除包含在 transition 組件中的元素時(shí),Vue將做如下處理:
1.自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 css 過度或動(dòng)畫,如果是在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 css 類名
2.如果過渡組件提供了 JavaScript鉤子函數(shù),這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用
3.如果沒有找到鉤子并且也沒有檢測到css動(dòng)畫,DOM操作(插入/刪除)在下一幀中立即執(zhí)行
過度的 css 類名
1. v-enter 定義進(jìn)入過渡的開始狀態(tài),在元素插入式時(shí)生效,在下一幀移除
2. v-enter-active 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入時(shí)生效,在 transition/animation 完成之后移除
3. v-leave 定義離開過度的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效,在下一幀移除
4. v-leave-active 定義離開過渡的結(jié)束狀態(tài),在離開過渡被觸發(fā)時(shí)生效,在下一幀被移除
html:
css:
.decrease{
transition:all 0.4s linear;
transform:translate3d(0,0,0);
opacity:1;
.inner{
transition:all 0.4s linear;
transform:rotate(0deg);
}
}
&.move-enter,&.move-leave-active{
transition:all 0.4s linear;
transform:translate3d(24px,0,0);
opacity:0;
.inner{
transform:rotate(180deg);
}
}
2. 增加小球動(dòng)畫
實(shí)現(xiàn)過程:
1、小球最終的落點(diǎn)都是一致的,在左下角購物車按鈕處 (transform:translate(0,0,0))
2、傳遞點(diǎn)擊的 dom 對象
在 cartcontrol 組件里點(diǎn)擊 + 時(shí), 將點(diǎn)擊的 dom 元素,通過通過 $emit 派發(fā)給父組件 goods.vue
this.$emit("add",event.target);
// 子組件$emit派發(fā)而來的事件
addFood(target) {
this._drop(target); //傳遞 target
},
_drop(target) {
// 體驗(yàn)優(yōu)化,異步執(zhí)行下落動(dòng)畫
this.$nextTick(() => {
//調(diào)用 shopcar 組件中的 drop 方法,向 shopcar組件 傳入當(dāng)前點(diǎn)擊的 dom 對象
this.$refs.shopcart.drop(target);
});
}
3.在 shopcar 組件里,創(chuàng)建 小球 dom 結(jié)構(gòu)
4. 創(chuàng)建 一個(gè)小球數(shù)組,內(nèi)置5個(gè)對象(5個(gè)小球,均有 show 屬性,初始值為false)
以便在多次快速點(diǎn)擊時(shí),屏幕出現(xiàn)多個(gè)小球
5個(gè)小球的初始位置 均在 左下角 購物車按鈕處
創(chuàng)建一個(gè) dropBalls 數(shù)組用于存儲(chǔ) 處在下落過程中的小球
執(zhí)行下落時(shí) 將 父組件傳遞過來的 dom 對象 當(dāng)做一個(gè)屬性 給 ball,方便 在下面的方法中計(jì)算 ball 的位置
data() {
return {
// 創(chuàng)建5個(gè)小球用于動(dòng)畫
balls:[{show:false},{show:false},{show:false},{show:false},{show:false}],
dropBalls:[], // 存儲(chǔ)下落小球
}
},
5.執(zhí)行 v-on:before-enter="beforeDrop" 過度前鉤子函數(shù)
設(shè)置 ball 初始位置,計(jì)算處 初始位置與目標(biāo)位置的 差值 x,y ,將小球 transform :translate(x,y,0)到動(dòng)畫初始位置
6.執(zhí)行 v-on:enter="dropping" 過度中鉤子函數(shù)
手動(dòng)觸發(fā)瀏覽器重繪,將 ball 通過 transform :translate(0,0,0) 移動(dòng)到目標(biāo)位置
7. 執(zhí)行 v-on:after-enter="afterDrop" 過度結(jié)束鉤子函數(shù)
從存儲(chǔ)下落小球的數(shù)組里 unshift 當(dāng)前小球
并將當(dāng)前小球 display:none; show:false
8.樣式
.ball-container{
//外層 做縱向運(yùn)動(dòng)
.ball{
position:fixed
left:32px
bottom:22px
z-index:200
//y 軸 貝塞爾曲線
transition:all 2s cubic-bezier(0.49, -0.29, 0.75, 0.41)
//內(nèi)從做橫向運(yùn)動(dòng)
.inner{
width:16px
height:16px
border-radius:50%
background-color:rgb(0,160,220)
//x 軸只需要線性緩動(dòng)
transition:all 2s linear
}
}
購物車列表的顯示隱藏狀態(tài)
按鈕控制 fold => fold 控制 => listShow , listShow => 控制狀態(tài)顯示 (在totalCount>0)
在 data 選項(xiàng)里,定義一個(gè) fold(折疊,true) 控制購物車的顯示隱藏狀態(tài)
在 computed 計(jì)算屬性里,定義一個(gè) listshow 方法,來表示購物車列表的顯示隱藏狀態(tài)
listShow() {
if(!this.totalCount){ //假如所選商品為 0 ,return 掉結(jié)果,并將 fold 置為初始值
this.fold = true;
return false;
}
let show = !this.fold; // 否則,取 fold 的反值,靠 fold 的變化來 決定 列表顯示與否
return show;
}
在 method 方法里有個(gè) toggleList 方法控制 fold 狀態(tài)
toggleList(){
if(!this.totalCount){
return;
}
this.fold = !this.fold;
},
詳情頁組件
將選中的商品 通過 props 傳給 子組件
food 組件 通過 $emit 將food 組件添加購物車按鈕傳遞給 父組件 以便實(shí)現(xiàn)小球動(dòng)畫
addFood(target){
console.log(target);
//當(dāng)前組件必須在父組件 引入處,bangding @add="xxx",繼而執(zhí)行 父組件的 xxx 方法
this.$emit("add",target);
},
詳情頁 過渡動(dòng)畫
&.fly-enter-active, &.fly-leave-active {
transition: all 0.2s linear
}
&.fly-enter, &.fly-leave-active {
transform: translate3d(100%, 0, 0)
}
ratingselect 組件(評價(jià)選擇組件)
1. 評價(jià)組件
全部、推薦、吐槽 類似一個(gè) tab 選項(xiàng)卡的欄目
只看有內(nèi)容的評價(jià) 篩選
因?yàn)檎麄€(gè)項(xiàng)目會(huì)有兩個(gè)地方有這個(gè)東西,所以將其抽象為 ratingselect 組件
組件書寫:
上邊是一個(gè) tab 選項(xiàng)卡
1. 定義 三個(gè)常量 代表這三種狀態(tài)
const Positive = 0; //推薦
const Negative = 1; //吐槽
const All = 2; //全部
在點(diǎn)擊事件中,將這三個(gè)狀態(tài),發(fā)送給 父組件
由于這 三個(gè)選項(xiàng) 的 選中狀態(tài),是由父組件(food.vue)父組件通過 props 傳遞過來的,所以不可以在子組件中修改
select(type,event){
if(!event._constructed){
return;
}
//不可以在子組件內(nèi),隨意改變父組件傳過來的值,通過 $emit 將子組件需要改變的值,發(fā)送給父組件,然后父組件在通過 props 傳給 子組件,然后 view 就會(huì)發(fā)生相應(yīng)的改變
this.$emit("select",type);
}
父組件:
使用子組件
//在 父組件 methods 對象中 用 selectRating 方法接收子組件 emit 過來的值,賦值給 父組件 selectType 然后在通過 props傳遞給子組件,從而實(shí)現(xiàn)改變
selectRating(type){
this.selectType = type;
this.$nextTick(()=> {
this.scroll.refresh();
})
},
//只看有內(nèi)容的 評價(jià) 也是同理
food.vue 組件中的時(shí)間轉(zhuǎn)換函數(shù)
在 common 目錄下創(chuàng)建一個(gè)公共工具函數(shù) utils.js ,然后在需要用到的 組件中,進(jìn)行 import 引入
utils.js
export
function formatDate(fmt){
......
}
在 food 組件中使用,只需用 import 引入要使用到的 方法 即可
import { format } from "common/js/utils"
在組件中即可直接使用 該方法
food.vue 里這種列表布局
上下左右的間距,用 padding 撐開
左邊 用 flex 給個(gè)固定的尺寸 flex: 0 0 28px
右側(cè) 用 flex:1 ,右側(cè)剩余空間 自動(dòng)充滿
然后右側(cè)內(nèi)容自然流布局,上下 margin 分配
右側(cè)時(shí)間采用絕對定位
布局:清晰簡單明了
一般情況下:列表中文字垂直居中的布局一般用 上下 padding 撐開,不要直接設(shè)置高度,用line-height居中
文字高度用 line-height 撐開
商家頁面(seller.vue) 商家實(shí)景頁面
商家實(shí)景左右滾動(dòng)列表圖片
先根據(jù)圖片尺寸和左右 margin 計(jì)算出 list 列表容器的 寬度,然后 用 better-scroll 進(jìn)行左右滾動(dòng)
一般情況下,要在 vue mounted 之后就可以初始化 better-scroll
但是這時(shí)候,圖片資源還沒有請求到,所以無法得知 圖片的 pics 的 length,繼而無法得知,列表容器的寬度
解決辦法:
vue 提供了一個(gè) watch 對象,來用來監(jiān)測數(shù)據(jù)的變化
當(dāng) watch 監(jiān)測到 seller 數(shù)據(jù)的變化,然后調(diào)用 _initPicScroll,初始化 better-scroll
watch:{
"seller"(){
this.$nextTick(()=>{
this._initPicScroll();
})
}
},
methods:{
_initPicScroll() {
if(this.seller.pics){
let picWidth = 120;
let margin = 6;
let width = this.seller.pics.length * (picWidth + margin) - margin;
this.$refs.picList.style.width = width + "px";
//better-scroll左右滾動(dòng)
this.picScroll = new BScroll(this.$refs.picWrapper,{
scrollX: true,
eventPassthrough: "vertical"
})
}
}
}
利用localStorage 在本地收藏商家
收藏商家是放在本地緩存 localStorage 里的
#1. 在 common/js/utils 文件里創(chuàng)建兩個(gè)公共函數(shù)函數(shù) 寫入 localStorae 和 讀取 localStorage
# 2. 在點(diǎn)擊收藏按鈕時(shí),調(diào)用存儲(chǔ) 方法,首次進(jìn)入頁面時(shí),調(diào)用 讀取方法
由于 確定收藏與否的 favorite 屬性,是在 data 選項(xiàng)上被vue監(jiān)測的,所以在data 選項(xiàng)上 favorite 是一個(gè)立即執(zhí)行函數(shù)
data:{
favorite: ( () => {
// 要讀取的對象,key值,默認(rèn)值
return loadFromLocal(this.seller.id, "favorite", false);
} )()
}
路由切換時(shí),各組件會(huì)保持原來的狀態(tài)
# 在路由外連上加上即可
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/84152.html
摘要:這是一個(gè)基于全家桶實(shí)現(xiàn)的餓了么移動(dòng)端項(xiàng)目地址如果覺得對您有幫助,您可以在上給我個(gè)支持一下,謝謝如果有問題,也歡迎一起討論先來張項(xiàng)目動(dòng)態(tài)截圖感受下項(xiàng)目運(yùn)行克隆項(xiàng)目到本地安裝依賴本地開發(fā),開啟服務(wù)器,瀏覽器訪問構(gòu)建生產(chǎn)項(xiàng)目說明用到的技術(shù)棧 這是一個(gè)基于Vue全家桶實(shí)現(xiàn)的餓了么移動(dòng)端webapp項(xiàng)目github地址:https://github.com/JerryYgh/m...如果覺得對您...
摘要:前言本文的前身是源自上的項(xiàng)目但由于該項(xiàng)目上次更新時(shí)間為年月日,很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄,所以小肆今天重新更新了內(nèi)容并新建項(xiàng)目。提交的項(xiàng)目格式如下項(xiàng)目名稱子標(biāo)題相關(guān)介紹如果收錄的項(xiàng)目有錯(cuò)誤,可以通過反饋給小肆。 前言 本文的前身是源自github上的項(xiàng)目awesome-github-vue,但由于該項(xiàng)目上次更新時(shí)間為2017年6月12日,很多內(nèi)容早已過期或是很多近期優(yōu)...
摘要:一個(gè)基于全家桶開發(fā)的仿知乎日報(bào)單頁應(yīng)用項(xiàng)目地址源碼地址項(xiàng)目在線地址在線地址模式下推薦使用移動(dòng)端模式瀏覽去觀看如果覺得做得還不錯(cuò)或者項(xiàng)目源碼對您有幫助希望您小抬右手到右上角點(diǎn)一個(gè)您的支持是作者長期更新維護(hù)的動(dòng)力項(xiàng)目起源從二月份開始學(xué)習(xí)學(xué)習(xí)了 Vue-News 一個(gè)基于vue全家桶開發(fā)的仿知乎日報(bào)單頁應(yīng)用 項(xiàng)目github地址:源碼地址 項(xiàng)目在線地址:在線地址 (PC模式下推薦使用chro...
摘要:但能拷貝圖粘貼后不失真通常是收費(fèi)富文本編輯器才具備的能力。是否支持編程語言高亮,例如按,語言高亮是否支持?jǐn)?shù)學(xué)公式等等因此選擇了兩款富文本編輯器,支持截屏粘貼,當(dāng)做跟蹤系統(tǒng)時(shí)這個(gè)功能特別有用。 一、Web應(yīng)用技術(shù)棧 在開發(fā)Web應(yīng)用時(shí),通常會(huì)使用到以下技術(shù)棧: showImg(https://segmentfault.com/img/bVbwceG);對應(yīng)這些技術(shù)棧都已有相應(yīng)的開源產(chǎn)品...
閱讀 1358·2021-11-22 14:56
閱讀 1799·2019-08-30 15:55
閱讀 3628·2019-08-30 15:45
閱讀 1904·2019-08-30 13:03
閱讀 3080·2019-08-29 18:47
閱讀 3564·2019-08-29 11:09
閱讀 2871·2019-08-26 18:36
閱讀 2793·2019-08-26 13:55