隨著這幾年前端技術(shù)的快速發(fā)展，Vue框架在國內(nèi)普及率極高，人人都會用。那么，如何才能寫得比別人優(yōu)雅？比別人漂亮？

鑒于一線互聯(lián)網(wǎng)大廠在前沿技術(shù)領(lǐng)域的持續(xù)研究和大規(guī)模投入，直接向他們?nèi)〗?jīng)，是最便捷也是最高效的學(xué)習(xí)方式。但對于在中小公司工作的程序員來說，平時(shí)忙碌于業(yè)務(wù)代碼，很少有機(jī)會接觸到大廠的優(yōu)秀實(shí)踐。

本文將介紹一些大廠Vue項(xiàng)目的最佳實(shí)踐：

1

一勞永逸的組件注冊

通常在組件使用前，需要引入后再注冊，但如果高頻組件多了，每次都這樣做，不僅新增很多代碼，效率還低！我們應(yīng)該如何優(yōu)化呢？

其實(shí)，我們可以借助一下webpack的require.context() 方法來創(chuàng)建自己的(模塊)上下文，從而實(shí)現(xiàn)自動(dòng)動(dòng)態(tài)require組件。

我們先在components文件夾(這里面都是些高頻組件)添加一個(gè)叫g(shù)lobal.js的文件，在這個(gè)文件里使用require.context 動(dòng)態(tài)將需要的高頻組件統(tǒng)統(tǒng)打包進(jìn)來，然后在main.js文件中引入global.js的文件。

最后我們就可以隨時(shí)隨地在頁面中使用這些高頻組件，無需再手動(dòng)一個(gè)個(gè)引入了。

2

高精度權(quán)限控制—自定義指令directive

我們通常給一個(gè)元素添加 v-if / v-show 來做權(quán)限管理，但如果判斷條件繁瑣且多個(gè)地方需要判斷，這種方式的代碼不僅不優(yōu)雅而且冗余。

針對這種情況，我們可以通過全局自定義指令來處理：我們先在新建個(gè) array.js 文件，用于存放與權(quán)限相關(guān)的全局函數(shù)；

最后我們在頁面中就可以通過自定義指令 v-permission 來判斷：

以上是幾個(gè)Vue大廠實(shí)戰(zhàn)經(jīng)驗(yàn)。

大家有沒有想過一個(gè)問題？隨著前端面試要求越來越高，像Vue這樣的框架已經(jīng)是基本功，我們憑什么敢說比別人厲害呢？

• 我們都會寫組件，但是你知道怎么讓組件能夠成為高復(fù)用性的組件庫型組件嗎？

• 我們都會項(xiàng)目打包上線，但是你知道如何編寫配置文件能讓打包速度最優(yōu)化嗎？

• 我們都會寫路由，但是你知道如何寫才能保證多路由模塊解耦，保證更方便增加新的路由模塊嗎？

說來說去，大家都知道前端的全方面學(xué)習(xí)需要完整的前端思路實(shí)踐教學(xué)，這邊準(zhǔn)備了一份前端路徑完整圖供大家學(xué)習(xí)：

當(dāng)然，有這些還不夠，私信小編，發(fā)送“資料”并且評論此文章送上web前端最新學(xué)習(xí)資料！

總結(jié)

以上是生活随笔為你收集整理的vue main.js中引入js_web前端的同学不容错过，大厂Vue最佳实践总结，提高竞争力...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。