學習 Vue.js 遇到的那些坑
排名不分先後
最近好像都是隻發瞭一些生活類,吐槽的一些 blog,不更新點技術相關的 可能有人會覺得 這傢夥肯定又在偷懶瞭。
那麼 好 我要開始裝逼瞭
類空指向
就是類似於空指針的一種錯誤方式 不會在 console 上報錯 非常難找的問題
resp.data.user.avatar //如果這個user是null的話 這麼調用不會報錯 也不會向下執行 非常坑 //如果你想判斷這個avatar的話 要這麼做 if(resp.data.user && resp.data.user.avatar){ //do... }
ES6 箭頭函數
箭頭函數和非箭頭函數也是有很大區別的
//普通匿名函數寫法 api() .then(function(resp){ this.count() //註意這個this 不是能正常使用的 count會是個undefined }) //ES6 箭頭函數 api() .then(resp => { this.count() //這裡沒毛病 })
vuetify
這是一個基於 Google Material 設計語言的 UI 框架,可以在 Vue.js 運行。
隻是安裝方式有點特殊,並且它的插件安裝方式也很特殊。
例如 vuetify 的 dialog
import VuetifyDialog from 'vuetify-dialog' import vuetify from './plugins/vuetify'; Vue.use(VuetifyDialog, { context: { vuetify } })
這就導致你寫 UI 的時候 要面向 Google 編程。(雖說其他後端語言也差不多 笑)
vue-cli
如果你是要新創建一個項目,並且這個項目規模不是特別大。
我非常推薦你使用 vue-cli 創建,說簡單點兒 這會提升 b 格。
廢話少說 上圖
vue create your_project_name vue ui
vue ui 會打開一個可視化頁面 像是上圖那樣。
然後在裡面導入由 vue-cli 創建的項目就可以和上圖一樣瞭 🙂
異步和同步
其實之前有個非常蠢的想法。
就是在用戶輸完表單之後,立即和服務器進行驗證,然後將結果刷新到 UI 上。
但是這個刷新 UI 需要一個同步操作。
我就一個勁的折騰怎麼去搞定將 axios 的異步操作變成同步。
如果是之前的 jQuery 就非常簡單麼 隻需要將裡面的 aysnc 屬性改掉就可以瞭。
但是你每次發請求 瀏覽器都會在 console 上提示 不推薦 XHR 同步請求。
為啥呢,因為瀏覽器裡面頁面是單線程的,如果你的請求是同步的,那麼就會導致每個請求都會讓頁面卡住一定的時間。
所以我最後還是改成瞭逐步驗證的方式 讓所有的請求都是異步操作的。
運行和部署
如果你本地開發
運行 serve(有些項目是 dev) 會開放一個端口號 讓你訪問用戶界面,並進行接近實時的 UI 調整。
如果你是要部署到線上 需要先執行 build 會在輸出目錄裡面生成靜態文件。
再把這些文件部署到服務器上 像是:
- nginx
- caddy
這裡我非常推薦 caddy,它是一個基於 golang 開發的服務器,部署輕量化,並且帶有管理 api,非常良好的支持 Http2,並且 支持 http3。
TIPS
這裡隻記錄一些剛開始玩的項目,在後面的開發裡,還會遇到更多問題。
例如頁面之間的刷新,等等等等。
所以很快就會有下一章的。
希望能幫到你。
以上就是學習 Vue.js 遇到的那些坑的詳細內容,更多關於學習 Vue.js 遇到的坑的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 超越Nginx的Web服務器caddy優雅用法
- vue項目多環境配置(.env)的實現
- Vue包大小優化的實現(從1.72M到94K)
- media配置及把用戶頭像從數據庫展示到前端的操作方法
- Vue之請求如何傳遞參數