Vue项目如何提高效率？来看大厂实践总结
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
// 会显示
// 无显示
// 会显示
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
欢迎加我微信「 vx172537 」拉你进技术群，长期交流学习…
关注公众号「前端开发屋」，持续为你推送精选好文，也可以加我为好友，随时畅谈。