實現(xiàn)去哪兒網(wǎng)webapp項目記錄

1.多頁應(yīng)用:

頁面跳轉(zhuǎn)的時候服務(wù)器都會返回HTML文件舞骆,只經(jīng)歷一個http請求

優(yōu)點:首屏?xí)r間快惜颇,SEO效果好

缺點:頁面切換慢


2.單頁應(yīng)用:

頁面跳轉(zhuǎn)通過js渲染竟块,不會刷新(不經(jīng)過http請求)

優(yōu)點:頁面切換快

缺點:首屏?xí)r間慢缸逃,seo差


3.reset.css解決不同手機(jī)樣式顯示不一樣問題


4.border.css解決移動端像素問題


5.npm install fastclick -s 解決移動端click事件300ms延遲:

在main.js中import fastclick from 'fastclick'

fastclick.attach(document.body)


6.iconfont圖標(biāo)庫针饥,把需要的圖標(biāo)添加到購物車,之后添加到iconfont里的項目中需频,通過壓縮包下載到本地項目丁眼。壓縮包里包含很多文件,只需要后綴名為eog,svg,ttf,woff,css這幾個文件

通過復(fù)制圖標(biāo)代碼的方式將圖標(biāo)放到頁面上昭殉,注意類名改成iconfont苞七,在iconfont.css修改路徑

如果添加了新的圖標(biāo),需要重新替換這五個文件挪丢?


7.修改了webpack配置項一定要重啟服務(wù)器 不然vue會報錯


8.build的webpack.base.config.js文件的alias可以為指定目錄自己定義名字蹂风,如@代表src


9.在碼云創(chuàng)建新分支

本地命令行:git pull 拉取新分支到本地

git checkout 新分支名 切換到新分支

git status? 能查看分支狀態(tài)

注意:開發(fā)的時候不要在主分支開發(fā)!G睢;葑摹!

git pull <遠(yuǎn)程庫名> <遠(yuǎn)程分支名>:<本地分支名> 表示從遠(yuǎn)程庫中獲取某個分支的更新,再與本地指定的分支進(jìn)行自動merge撵渡。


在自己的分支寫好后合并到主分支:

先git add .

git commit -m '解釋內(nèi)容'

git push? 這一步是把自己本地的分支提交到線上自己的分支但沒合并到主分支

git checkout master? 切換到主分支

git fetch --all 先拉取到本地

git merge origin/自己分支名? get merge表示合并指定分支(自己的)到當(dāng)前分支(master)

git push 將主分支推到線上


10.使用輪播圖也有第三方庫:vue-awesome-swiper 去github里找


11.scoped表示樣式模塊化融柬,在里面定義的樣式只對當(dāng)前組件有效趋距。如果當(dāng)前組件運用到了全局的樣式粒氧,需要用>>>來表示樣式穿透?节腐?外盯?


12.設(shè)置元素的寬高比:將元素高度設(shè)為0,通過padding-bottom的百分比(針對父元素的寬度)設(shè)置高度铜跑,比如每個元素的 width 是 25%门怪,現(xiàn)在想讓元素的高度始終保持為其寬度的兩倍,則 padding-bottom 的值應(yīng)該設(shè)置為 50%锅纺。


13.pages=[[],[],[]],利用二維數(shù)組掷空,根據(jù)數(shù)據(jù)自動地構(gòu)建輪播圖頁碼,可以實現(xiàn)多頁切換輪播圖的效果


14.

text-overflow:ellipse

overflow:hidden

white-space:nowrap

這三行樣式實現(xiàn)溢出文本顯示省略號效果囤锉,如果出現(xiàn)不了省略號可以考慮加個min-width:0


15.在.gitignore定義的文件不會被提交到本地和線上的倉庫


16.使用proxy封裝請求api坦弟,請求到本地static目錄下的mock文件夾:在config的index.js中,找到proxyTable這個配置項

(請求后端服務(wù)器接口也在這里改)

proxyTable: {


'/api':{


? target:'http://localhost:8080',


? pathRewrite:{


? '^/api':'/static/mock'


? ? }


? }


? }


17.第三方庫better-scroll:github有

用法:

npm i better-scroll -s

import Bscroll from 'better-scroll'

調(diào)用mounted聲明周期函數(shù)官地,頁面加載完成之后可以使頁面手動滑動

mounted(){

? ? ? this.scroll = new Bscroll(this.$refs.wrapper) //要取到最外層(包裹層)的dom元素

? ? }


18.函數(shù)節(jié)流:

由于滾動事件非常頻繁酿傍,稍微滾動一下就會觸發(fā)許多次,如果頻繁觸發(fā)的滾動驱入,每一次都去檢查是否到頁面底部了再次造成了浪費赤炒。

于是設(shè)置一個開關(guān),一次只能有一個觸發(fā)執(zhí)行亏较,并對執(zhí)行設(shè)置計時一段時間再執(zhí)行莺褒,執(zhí)行完畢之后再解鎖。這就是函數(shù)節(jié)流雪情。(設(shè)置timer遵岩,clearTimeout(timer),setTimeout(()=>{要計算的東西},間隔時間)


19.對于不同組件之間的通信,如果是兄弟組件巡通,有共同的父組件尘执,可以通過傳給父組件再傳給子組件的方式通信。但如果是沒有共同父組件的組件之間的通信宴凉,就需要用到vuex誊锭。總線模式也可以但比較麻煩


20.vue全局事件的解綁:在某個組件使用了window.addEventListener,所有組件都會監(jiān)聽到弥锄,這就需要在這個組件解綁全局事件:window.removeEventListener(在生命周期鉤子中炉旷,如deactivated)


21.組件name的用法:

1.遞歸組件時自己組件的名字用的就是name

2.頁面取消緩存如keep-alive include/exclude=“name”

3.vue devtools中的組件名字也是name


22.動畫過渡失效签孔?在detail-animation分支


23.更改webpack,使本地ip地址能訪問網(wǎng)站:在package.json中dev增加一句:--host 0.0.0.0

手機(jī)和電腦在同一個局域網(wǎng)手機(jī)就可以訪問(真機(jī)調(diào)試)


24.解決手機(jī)兼容性問題:

安裝第三方包:npm i babel-polyfill -s

在main.js引入 import 'babel-polyfill'


25.項目打包上線:

npm run build

生成的dist文件夾就是要上線的內(nèi)容窘行,給后端放到服務(wù)器上(后端的根目錄)

如果要修改后端運行的目錄饥追,要找到config文件夾下的index.js文件,找到build罐盔,修改assetsPublicPath即可(默認(rèn)是后端根路徑)

修改過的文件記得重新打包

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末但绕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子惶看,更是在濱河造成了極大的恐慌捏顺,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纬黎,死亡現(xiàn)場離奇詭異幅骄,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)本今,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門拆座,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冠息,你說我怎么就攤上這事挪凑。” “怎么了逛艰?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵躏碳,是天一觀的道長。 經(jīng)常有香客問我散怖,道長菇绵,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任镇眷,我火速辦了婚禮咬最,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘偏灿。我一直安慰自己丹诀,他們只是感情好钝的,可當(dāng)我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布翁垂。 她就那樣靜靜地躺著,像睡著了一般硝桩。 火紅的嫁衣襯著肌膚如雪沿猜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天碗脊,我揣著相機(jī)與錄音啼肩,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛祈坠,可吹牛的內(nèi)容都是我干的害碾。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼赦拘,長吁一口氣:“原來是場噩夢啊……” “哼慌随!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起躺同,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤阁猜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蹋艺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體剃袍,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年捎谨,在試婚紗的時候發(fā)現(xiàn)自己被綠了民效。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡侍芝,死狀恐怖研铆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情州叠,我是刑警寧澤棵红,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站咧栗,受9級特大地震影響逆甜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜致板,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一交煞、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧斟或,春花似錦素征、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至怜珍,卻和暖如春端蛆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背酥泛。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工今豆, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留嫌拣,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓呆躲,卻偏偏與公主長得像异逐,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子插掂,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 用到的組件 1应役、通過CocoaPods安裝 2、第三方類庫安裝 3燥筷、第三方服務(wù) 友盟社會化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,613評論 1 180
  • 今晚的月亮挺美箩祥,我說是的。 很多時候肆氓,咬牙堅持一段時間就可以了袍祖,堅持很重要,每天堅持刷牙谢揪,七分飽的食量是最舒服的蕉陋,...
    壞洋人閱讀 142評論 0 0
  • 本文參加#未完待續(xù),就要表白#活動拨扶,本人承諾凳鬓,文章內(nèi)容為原創(chuàng),且未在其他平臺發(fā)表過患民。 近年來缩举,雖然城市公共交通系統(tǒng)...
    青春猛飛揚閱讀 173評論 0 1
  • 冬日綠草末全枯,萬里白云近卻無匹颤。 二人齊坐方寸草仅孩,曰光只照雙影孤。
    大同行者閱讀 160評論 0 0
  • 我外公是一個快80歲的老頭了,可是精神抖擻赦肃,做起田地活來可有年輕人的干勁兒溅蛉。 外公家離我家近,可...
    B超機(jī)想吃狗肉閱讀 304評論 2 1