网易vue项目实践与经验分享，前端开发必看！

对于从事前端工作的小伙伴，掌握Vue，React这样的框架可以说是前端基本功了。人人都会用，那我们怎样才能写得比别人优雅？比别人漂亮？

鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入，直接向他们取经，是最便捷也是最高效的学习方式。

本文将介绍大厂Vue项目两大最佳实践：

01

一劳永逸的组件注册

通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？
其实，我们可以借助一下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 install = () => {
  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 {
  install // 对外暴露install方法
}

最后我们就可以随时随地在页面中使用这些高频组件，无需再手动一个个引入了。

02

高精度权限控制

——自定义指令directive

我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。

针对这种情况，我们可以通过全局自定义指令来处理：我们先在新建个 array.js 文件，用于存放与权限相关的全局函数；

// array.js
export function checkArray (key) {
  let arr = ['1', '2', '3', '4', 'demo']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

然后在将 array 文件挂载到全局中:

// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {
  inserted (el, binding) {
    let permission = binding.value; // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission);
      if (!hasPermission) { // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  }
});

最后我们在页面中就可以通过自定义指令 v-permission 来判断：

<div class="btns">
    <button v-permission="'1'">权限按钮1</button>  // 会显示
    <button v-permission="'10'">权限按钮2</button>  // 无显示
    <button v-permission="'demo'">权限按钮3</button> // 会显示
  </div>

除了以上分享，还有一些能体现竞争力的实践，你会吗？

• 我们都会写组件，但是你知道怎么让组件能够成为高复用性的组件库型组件吗？
  

• 我们都会项目打包上线，但是你知道如何编写配置文件能让打包速度最优化吗？

• 我们都会写路由，但是你知道如何写才能保证多路由模块解耦，保证更方便增加新的路由模块吗？
  

因为目前是否积累优秀实战经验已经成为区分前端水平高低的评判标准，这边给大家推荐网易资深工程师开设的直播分享。大家可以学习到大厂的vue优秀实践。

网易独家面试集训

3天前端直播课

7月27日-7月29日  0元学习,每晚8点

7月27日

【那些源码教我的事】

一节课教你写出高质量代码

源码有哪些值得学习的 

源码组织模式 

透过源码学习设计模式

7月28日

【搞定面试】

前端面试一般都会问哪些底层原理?

为什么会有手写 promise 这种奇葩题目

从输入url到看到页面发生了什么

V8 ToPrimitve 函数相关面试题系列 ({}+[[]][[]])...

7月29日

【技能拓展】

一线互联网项目都有的api层是怎么做的?

Axios源码分析

大型项目中的api层

二次封装Axios实例

请持续关注，

还有网易老师亲自简历指导，就业咨询哦！

扫描下方二维码 

添加助教小姐姐一起进步

遇到扫码频繁，请再次识别哦

别让您的犹豫阻碍您的进步

进阶视频资料+ 学习路径图

扫描下方二维码获取高清版

网易进阶学习路径图等你来

扫描下方二维码，免费获取

遇到扫码频繁，请再次识别哦

别让您的犹豫阻碍您的进步

免费直播，海量资料，先到先得~

往期直播干货回顾↓