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

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

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

1

一勞永逸的組件注冊(cè)

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

其實(shí)，我們可以借助一下webpack的require.context() 方法來(lái)創(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)來(lái)，然后在main.js文件中引入global.js的文件。

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

2

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

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

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

最后我們?cè)陧?yè)面中就可以通過(guò)自定義指令 v-permission 來(lái)判斷：

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

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

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

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

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

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

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

總結(jié)

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

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