vue開發(fā)項目遇到的難點（vue開發(fā)中遇到的難點）

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

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

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

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

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

本文目錄:

• 1、Vue2.x仿網(wǎng)易云音樂項目問題記錄（1）

• 2、vue項目 處理addEventListener的坑

• 3、前端項目開發(fā)<Vue>

• 4、Vue項目，登錄成功，但是請求其他接口報錯的問題

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

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

NeteaseCloudMusicApi項目。

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

其中遇到部分問題特記錄下：

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

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

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

absolute和relative的區(qū)別

absoleute絕對定位的意思是說，它的定位不受父元素中其他元素的影響

relative相對定位，就是會受到父元素中其他元素影響

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

對于absolute狀況下：

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

right，top，bottom同上

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

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

具體效果自行腦補。

ps：

會不定期的更新vue項目開發(fā)中遇到的部分坑吧。

二、vue項目 處理addEventListener的坑

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

原來是這個頁面之中注冊了一個addEventListener事件，用來監(jiān)聽document的點擊事件，從而對用戶的點擊做出一些反饋。

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

這之后再進行多次的操作該頁面也就不會有這樣的問題了~

三、前端項目開發(fā)<Vue>

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

示例：

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

配置方法如下，其中key值為自定義的簡寫名稱（如stylePath），value值為配置的路徑

示例：

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

實際上，HTML會將 router-link 渲染成 <a> 標簽

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

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

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

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

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

如果通過 keep-alive 進行頁面的緩存，會將其包裹下的路由子頁面都會被緩存，假如其中的某一子頁面不需要被緩存，則可以通過 exclude 語法將不需要緩存的頁面隔離出去，保證其每次都會重新加載請求：

注：

當在一個頁面拖動到底部的某個位置的時候，再點擊其中的一個元素進入到下一個頁面，則進入的這個頁面也會被拖到相同的位置，這就造成了多頁面的拖動影響

在路由配置中，加入一項 scrollBescrollBehavior ，即每次進行路由切換的時候，讓頁面的初始位置為指定的x和y值

前端項目通過webpage 啟動的，它不支持IP的形式進行頁面訪問，所以需要修改項目的默認配置項

在項目的根目錄下的package.json文件中，進行如下配置：

注： 主頁增加了 --host 0.0.0.0

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

通過使用第三方框架庫 babel-polyfill 來解決兼容性問題

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

說明：

四、Vue項目，登錄成功，但是請求其他接口報錯的問題

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

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

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

谷歌瀏覽器接口請求cookie突然無法攜帶的問題

Chrome 80跨域cookie無法攜帶

新版本chrome瀏覽器帶來的跨域請求cookie丟失問題

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

推薦閱讀：

vue開發(fā)項目遇到的難點（vue開發(fā)中遇到的難點）

vue畫心電圖（canvas畫心電圖）

svu排行榜（suv排行榜前十名品牌汽車）

如何把位置標在地圖上（如何把位置標在地圖上并且?guī)辖?jīng)緯度）

鄭州最好的品牌策劃公司