Vue專案如何提高效率？來看大廠實踐總結

對於從事前端工作的小夥伴，掌握Vue，React這樣的框架可以說是前端基本功了。人人都會用，那我們怎樣才能寫得比別人優雅？比別人漂亮？

鑑於一線網際網路大廠在前沿技術領域的持續研究和大規模投入，直接向他們取經，是最便捷也是最高效的學習方式。

接下來將介紹大廠Vue專案兩大最佳實踐：

   1、通常在元件使用前，需要引入後再註冊，但如果高頻元件多了，每次都這樣做，不僅新增很多程式碼，效率還低！我們應該如何優化呢？

其實，我們可以藉助一下webpack的require.context() 方法來建立自己的（模組）上下文，從而實現自動動態require元件。

我們先在components資料夾（這裡面都是些高頻元件）新增一個叫global.js的檔案，在這個檔案裡使用require.context 動態將需要的高頻元件統統打包進來，然後在main.js檔案中引入global.js的檔案。

//  新建global.js檔案
import Vue from 'vue'
function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查詢同級目錄下以vue結尾的元件
 

const register = () => {
  requireComponent.keys().forEach(fileName => {
    let config = requireComponent(fileName)
    console.log(config) // ./child1.vue 然後用正則拿到child1
    let componentName = changeStr(
      fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    Vue.component(componentName,
 
 config.default || config)
  })
}
export default {
  register // 對外暴露register方法
}

此時我們就可以隨時隨地在頁面中使用這些高頻元件，無需再手動引入，是否事半功倍呢。

   2、我們通常給一個元素新增 v-if / v-show 來做許可權管理，但如果判斷條件繁瑣且多個地方需要判斷，這種方式的程式碼不僅不優雅而且冗餘。針對這種情況，我們可以通過全域性自定義指令來處理：我們先在新建個 jurisdiction.js 檔案，用於存放與許可權相關的全域性函式；

// 新建jurisdiction.js
export function checkjurisdiction (key) {
  let arr = ['1', '2', '3', 'demo']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 判斷有許可權
  } else {
    return false // 判斷無許可權
  }
}
然後在將 jurisdiction 檔案掛載到全域性中:

```javascript

// main.js
import { checkjurisdiction } from "./common/jurisdiction";
Vue.directive("permission", {
  inserted (el, binding) {
    let permission = binding.value; // 獲取到 v-permission的值
    if (permission) {
      let hasPermission = checkjurisdiction(permission);
      if (!hasPermission) { // 沒有許可權 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  }
});

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

```javascript
 <div class="btns">
    <button v-permission="'1'">許可權按鈕1</button>  // 會顯示
    <button v-permission="'10'">許可權按鈕2</button>  // 無顯示
    <button v-permission="'demo'">許可權按鈕3</button> // 會顯示
  </div>

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：

點個「在看」，讓更多的人也能看到這篇內容（喜歡不點在看，都是耍流氓 -_-）

歡迎加我微信「 vx172537 」拉你進技術群，長期交流學習…

關注公眾號「前端開發屋」，持續為你推送精選好文，也可以加我為好友，隨時暢談。