专栏首页前端达人Vue项目如何提高效率?大厂2大实践总结告诉你

Vue项目如何提高效率?大厂2大实践总结告诉你

对于从事前端工作的小伙伴,掌握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 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方法
}

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

2

高精度权限控制—自定义指令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>

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

  • 我们都会写组件,但是你知道怎么让组件能够成为高复用性的组件库型组件吗?
  • 我们都会项目打包上线,但是你知道如何编写配置文件能让打包速度最优化吗?
  • 我们都会写路由,但是你知道如何写才能保证多路由模块解耦,保证更方便增加新的路由模块吗?

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-05-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大厂2个Vue实践总结,效率提升80%!

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

    @超人
  • 如何避开Vue性能优化之路的荆棘?

    随着这几年前端技术快速发展,Vue框架在国内普及率极高,人人都会用,那Vue如何写得比别人优雅?如何写得比别人漂亮?

    前端劝退师
  • 适合 JS 新手学习的开源项目——在 GitHub 学编程

    这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇,系列文章:

    HelloGitHub
  • 腾讯工程师们怎么玩 Vue.js?

    Vue.js 是国人尤雨溪开发的一套前端框架。从去年开始,就火遍了国内外。本文精选了腾云阁中分享的相关优质技术文章,从入门、实战、源码、优化等多个方面进行了阐述...

    云加社区
  • 横扫9家大厂前端校招offer

    我就读于北京理工大学软件工程专业,是一名大四学生。从大一开始投入以前端为主的全栈开发,独立开发过多个中型和小型项目,是 佬铁|宿舍市集 小程序的社区创始人及独立...

    前端迷
  • 深究Vue底层原理源码

    Vue3.0还没有发布,大家都对它十分期待,以2.0的特点与现下对3.0的了解来说,3.0会默认进行懒观察,会更加有效,也会有更精准的变更通知;大家也都在猜Vu...

    coder_koala
  • 12 种使用 Vue 的最佳做法

    随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

    前端达人
  • 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)

    https://juejin.im/post/5e85ec79e51d4547153d073820ed

    闰土大叔
  • 杭州码农图鉴:与某大厂前端从业者的一次推心置腹

    首先我与这位来自杭州XX旅游(应大佬要求,城市和公司皆化名,同在南方城市,暂以杭州代替)的前端大佬结缘,是因为我的上一篇文章“聊聊北京大部分前端从业者所面临的困...

    闰土大叔

扫码关注云+社区

领取腾讯云代金券