學(xué)習(xí) Vue.js 遇到的那些坑
排名不分先后
最近好像都是只發(fā)了一些生活類,吐槽的一些 blog,不更新點(diǎn)技術(shù)相關(guān)的 可能有人會(huì)覺得 這家伙肯定又在偷懶了。
那么 好 我要開始裝逼了
類空指向
就是類似于空指針的一種錯(cuò)誤方式 不會(huì)在 console 上報(bào)錯(cuò) 非常難找的問題
resp.data.user.avatar //如果這個(gè)user是null的話 這么調(diào)用不會(huì)報(bào)錯(cuò) 也不會(huì)向下執(zhí)行 非??? //如果你想判斷這個(gè)avatar的話 要這么做 if(resp.data.user && resp.data.user.avatar){ //do... }
ES6 箭頭函數(shù)
箭頭函數(shù)和非箭頭函數(shù)也是有很大區(qū)別的
//普通匿名函數(shù)寫法 api() .then(function(resp){ this.count() //注意這個(gè)this 不是能正常使用的 count會(huì)是個(gè)undefined }) //ES6 箭頭函數(shù) api() .then(resp => { this.count() //這里沒毛病 })
vuetify
這是一個(gè)基于 Google Material 設(shè)計(jì)語(yǔ)言的 UI 框架,可以在 Vue.js 運(yùn)行。
只是安裝方式有點(diǎn)特殊,并且它的插件安裝方式也很特殊。
例如 vuetify 的 dialog
import VuetifyDialog from 'vuetify-dialog' import vuetify from './plugins/vuetify'; Vue.use(VuetifyDialog, { context: { vuetify } })
這就導(dǎo)致你寫 UI 的時(shí)候 要面向 Google 編程。(雖說其他后端語(yǔ)言也差不多 笑)
vue-cli
如果你是要新創(chuàng)建一個(gè)項(xiàng)目,并且這個(gè)項(xiàng)目規(guī)模不是特別大。
我非常推薦你使用 vue-cli 創(chuàng)建,說簡(jiǎn)單點(diǎn)兒 這會(huì)提升 b 格。
廢話少說 上圖
vue create your_project_name vue ui
vue ui 會(huì)打開一個(gè)可視化頁(yè)面 像是上圖那樣。
然后在里面導(dǎo)入由 vue-cli 創(chuàng)建的項(xiàng)目就可以和上圖一樣了 :)
異步和同步
其實(shí)之前有個(gè)非常蠢的想法。
就是在用戶輸完表單之后,立即和服務(wù)器進(jìn)行驗(yàn)證,然后將結(jié)果刷新到 UI 上。
但是這個(gè)刷新 UI 需要一個(gè)同步操作。
我就一個(gè)勁的折騰怎么去搞定將 axios 的異步操作變成同步。
如果是之前的 jQuery 就非常簡(jiǎn)單么 只需要將里面的 aysnc 屬性改掉就可以了。
但是你每次發(fā)請(qǐng)求 瀏覽器都會(huì)在 console 上提示 不推薦 XHR 同步請(qǐng)求。
為啥呢,因?yàn)闉g覽器里面頁(yè)面是單線程的,如果你的請(qǐng)求是同步的,那么就會(huì)導(dǎo)致每個(gè)請(qǐng)求都會(huì)讓頁(yè)面卡住一定的時(shí)間。
所以我最后還是改成了逐步驗(yàn)證的方式 讓所有的請(qǐng)求都是異步操作的。
運(yùn)行和部署
如果你本地開發(fā)
運(yùn)行 serve(有些項(xiàng)目是 dev) 會(huì)開放一個(gè)端口號(hào) 讓你訪問用戶界面,并進(jìn)行接近實(shí)時(shí)的 UI 調(diào)整。
如果你是要部署到線上 需要先執(zhí)行 build 會(huì)在輸出目錄里面生成靜態(tài)文件。
再把這些文件部署到服務(wù)器上 像是:
- nginx
- caddy
這里我非常推薦 caddy,它是一個(gè)基于 golang 開發(fā)的服務(wù)器,部署輕量化,并且?guī)в泄芾?api,非常良好的支持 Http2,并且 支持 http3。
TIPS
這里只記錄一些剛開始玩的項(xiàng)目,在后面的開發(fā)里,還會(huì)遇到更多問題。
例如頁(yè)面之間的刷新,等等等等。
所以很快就會(huì)有下一章的。
希望能幫到你。
以上就是學(xué)習(xí) Vue.js 遇到的那些坑的詳細(xì)內(nèi)容,更多關(guān)于學(xué)習(xí) Vue.js 遇到的坑的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue實(shí)現(xiàn)簡(jiǎn)單基礎(chǔ)的圖片裁剪功能
這篇文章主要為大家詳細(xì)介紹了如何利用Vue2實(shí)現(xiàn)簡(jiǎn)單基礎(chǔ)的圖片裁剪功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue項(xiàng)目路由刷新的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07Vue3如何通過ESLint校驗(yàn)代碼是否符合規(guī)范詳解
ESLint可以靈活設(shè)置規(guī)則,也發(fā)布了很多公開的規(guī)則集,下面這篇文章主要給大家介紹了關(guān)于Vue3如何通過ESLint校驗(yàn)代碼是否符合規(guī)范的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)完整代碼
作為一個(gè)AI模型,人臉識(shí)別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架, 開發(fā)只需要關(guān)注視圖層, 它不僅易于上手,還便于與第三方庫(kù)或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下2019-12-12vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作
這篇文章主要介紹了vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07