正文

vue開(kāi)發(fā)項(xiàng)目遇到的難點(diǎn)（vue開(kāi)發(fā)中遇到的難點(diǎn)）

發(fā)布時(shí)間：2023-04-08 08:37:12 稿源：創(chuàng)意嶺閱讀： 83

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于vue開(kāi)發(fā)項(xiàng)目遇到的難點(diǎn)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話(huà)答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線(xiàn)網(wǎng)頁(yè)版、PC客戶(hù)端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請(qǐng)撥打電話(huà)175-8598-2043，或添加微信：1454722008

本文目錄:

1、Vue2.x仿網(wǎng)易云音樂(lè)項(xiàng)目問(wèn)題記錄（1）
2、vue項(xiàng)目處理addEventListener的坑
3、前端項(xiàng)目開(kāi)發(fā)<Vue>
4、Vue項(xiàng)目，登錄成功，但是請(qǐng)求其他接口報(bào)錯(cuò)的問(wèn)題

vue開(kāi)發(fā)項(xiàng)目遇到的難點(diǎn)（vue開(kāi)發(fā)中遇到的難點(diǎn)）

一、Vue2.x仿網(wǎng)易云音樂(lè)項(xiàng)目問(wèn)題記錄（1）

近期在做仿網(wǎng)易云音樂(lè)的項(xiàng)目，api用到GitHub上

NeteaseCloudMusicApi項(xiàng)目。

技術(shù)棧：Vue2.x，elementUI，Vuex，Vue Router

其中遇到部分問(wèn)題特記錄下：

如果想要修改elementUI，可以使用全局css。并在main.js中import。這樣自定義的樣式會(huì)作用的到對(duì)應(yīng)的組件上例如

特別注意，class的名字一定要與elementUI的組件名一致，具體原因看下組件源碼樣式class就是組件名稱(chēng)。如果不想全局引用?？梢栽趘ue文件中，添加/deep/：

這樣就可以在vue文件更改對(duì)應(yīng)樣式。

absolute和relative的區(qū)別

absoleute絕對(duì)定位的意思是說(shuō)，它的定位不受父元素中其他元素的影響

relative相對(duì)定位，就是會(huì)受到父元素中其他元素影響

其中又left，right，top，bottom等控制元素所在位置。

對(duì)于absolute狀況下：

left是，子控件，距離包含他的父控件的左側(cè)的位置多少。類(lèi)似padding-left。

right，top，bottom同上

其中，如果想做動(dòng)態(tài)的布局，元素塊隨著窗口的大小改變而改變，可以這樣用。

不設(shè)置width，設(shè)置父，子塊元素的left，right，top， bottom即可。如果父級(jí)設(shè)置，子元素也要設(shè)置，不然對(duì)應(yīng)效果不會(huì)顯示的。

具體效果自行腦補(bǔ)。

ps：

會(huì)不定期的更新vue項(xiàng)目開(kāi)發(fā)中遇到的部分坑吧。

二、vue項(xiàng)目處理addEventListener的坑

最近項(xiàng)目中遇到一個(gè)問(wèn)題，讓我很是費(fèi)解。就是同一個(gè)頁(yè)面在首次進(jìn)入并且對(duì)頁(yè)面進(jìn)行一些操作時(shí)并沒(méi)有什么問(wèn)題。數(shù)據(jù)的交互及保存操作也能完成。但當(dāng)次頁(yè)面重復(fù)幾次進(jìn)入并操作時(shí)，頁(yè)面就會(huì)卡死，cpu的占用也急劇升高。在排查了一天之后終于找到了原因：

原來(lái)是這個(gè)頁(yè)面之中注冊(cè)了一個(gè)addEventListener事件，用來(lái)監(jiān)聽(tīng)document的點(diǎn)擊事件，從而對(duì)用戶(hù)的點(diǎn)擊做出一些反饋。

乍看這里是沒(méi)有什么問(wèn)題的，但我疏忽的是光注冊(cè)了這個(gè)監(jiān)聽(tīng)事件，沒(méi)有對(duì)這個(gè)事件做到“有始有終”。這是對(duì)document的監(jiān)聽(tīng)事件是一個(gè)全局的操作，如果沒(méi)有手動(dòng)的去取消這個(gè)監(jiān)聽(tīng)那么它的監(jiān)聽(tīng)機(jī)制也就一直存在著，這樣每次進(jìn)入這個(gè)頁(yè)面也就意味著都會(huì)增加一次對(duì)它的監(jiān)聽(tīng)。多次之后自然頁(yè)面也就會(huì)卡死了。發(fā)現(xiàn)了問(wèn)題，那么解決方案也就很簡(jiǎn)單了，只要在頁(yè)面被注銷(xiāo)之前手動(dòng)清除這個(gè)監(jiān)聽(tīng)事件也就可以了：

這之后再進(jìn)行多次的操作該頁(yè)面也就不會(huì)有這樣的問(wèn)題了~

三、前端項(xiàng)目開(kāi)發(fā)<Vue>

說(shuō)明： 在項(xiàng)目開(kāi)發(fā)中，在一個(gè)js或css文件中如果導(dǎo)入其他目錄下的相關(guān)文件，就需要通過(guò)如下方式,

示例：

但如果每次都導(dǎo)入同一目錄下的文件，會(huì)比較麻煩，就可以通過(guò)設(shè)置簡(jiǎn)寫(xiě)路徑達(dá)到同樣的導(dǎo)入效果

配置方法如下，其中key值為自定義的簡(jiǎn)寫(xiě)名稱(chēng)（如stylePath），value值為配置的路徑

示例：

在需要跳轉(zhuǎn)的元素外包裹一層 <router-link></router-link> ，使用 to 語(yǔ)法即可跳轉(zhuǎn)到指定的頁(yè)面中

實(shí)際上，HTML會(huì)將 router-link 渲染成 <a> 標(biāo)簽

這就會(huì)導(dǎo)致被 router-link 包裹的元素中的文字顯示成 <a> 默認(rèn)的藍(lán)色樣式，可通過(guò)如下方式解決：

使用tag將 router-link 標(biāo)記為 li 標(biāo)簽，這樣既保證了 ul 中的子元素為 li ，又保證了html在渲染的時(shí)候，不會(huì)講 router-link 渲染為 a 標(biāo)簽

如果某一頁(yè)面多次被訪(fǎng)問(wèn)，并且其中的數(shù)據(jù)基本保持不變，則可以使用頁(yè)面緩存的技術(shù)：

注：當(dāng)頁(yè)面被緩存后，生命周期鉤子 mounted 方法則只會(huì)在第一次進(jìn)入的時(shí)候，執(zhí)行一次，就不會(huì)再執(zhí)行了。但生命周期鉤子方法 activated 方法會(huì)每次調(diào)用

但如果頁(yè)面的數(shù)據(jù)根據(jù)傳過(guò)來(lái)的參數(shù)來(lái)判定是否需要緩存和刷新數(shù)據(jù)，則可以通過(guò)生命周期的鉤子 activated 來(lái)實(shí)現(xiàn)數(shù)據(jù)的刷新

如果通過(guò) keep-alive 進(jìn)行頁(yè)面的緩存，會(huì)將其包裹下的路由子頁(yè)面都會(huì)被緩存，假如其中的某一子頁(yè)面不需要被緩存，則可以通過(guò) exclude 語(yǔ)法將不需要緩存的頁(yè)面隔離出去，保證其每次都會(huì)重新加載請(qǐng)求：

注：

當(dāng)在一個(gè)頁(yè)面拖動(dòng)到底部的某個(gè)位置的時(shí)候，再點(diǎn)擊其中的一個(gè)元素進(jìn)入到下一個(gè)頁(yè)面，則進(jìn)入的這個(gè)頁(yè)面也會(huì)被拖到相同的位置，這就造成了多頁(yè)面的拖動(dòng)影響

在路由配置中，加入一項(xiàng) scrollBescrollBehavior ，即每次進(jìn)行路由切換的時(shí)候，讓頁(yè)面的初始位置為指定的x和y值

前端項(xiàng)目通過(guò)webpage 啟動(dòng)的，它不支持IP的形式進(jìn)行頁(yè)面訪(fǎng)問(wèn)，所以需要修改項(xiàng)目的默認(rèn)配置項(xiàng)

在項(xiàng)目的根目錄下的package.json文件中，進(jìn)行如下配置：

注：主頁(yè)增加了 --host 0.0.0.0

在某些瀏覽器和手機(jī)上不支持一些es6和vue的新特性，就會(huì)出現(xiàn)兼容性的問(wèn)題

通過(guò)使用第三方框架庫(kù) babel-polyfill 來(lái)解決兼容性問(wèn)題

參考文章： https://blog.csdn.net/crazyfeeling/article/details/70241285

說(shuō)明：

四、Vue項(xiàng)目，登錄成功，但是請(qǐng)求其他接口報(bào)錯(cuò)的問(wèn)題

在Vue項(xiàng)目開(kāi)發(fā)中，遇到一個(gè)很奇怪的問(wèn)題，就是登錄成功，已經(jīng)返回200了，然后跳轉(zhuǎn)到項(xiàng)目首頁(yè)，去請(qǐng)求其他接口的時(shí)候，卻顯示沒(méi)有權(quán)限，起初有這個(gè)問(wèn)題的時(shí)候，我只要?jiǎng)h除了使用命令：

生成的 MyChromeDevUserData 文件夾就可以的，但是顯示不行了，真是奇怪了。

在Chrome中訪(fǎng)問(wèn) chrome://flags/ ，搜索SameSite并設(shè)置為disabled即可。

谷歌瀏覽器接口請(qǐng)求cookie突然無(wú)法攜帶的問(wèn)題

Chrome 80跨域cookie無(wú)法攜帶

新版本chrome瀏覽器帶來(lái)的跨域請(qǐng)求cookie丟失問(wèn)題

以上就是關(guān)于vue開(kāi)發(fā)項(xiàng)目遇到的難點(diǎn)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。