在开发迭代过程中,很多重复的代码和逻辑会增加我们的工作量,让我们很苦恼。面对这种情况,我们需要提高开发效率,避免重复。下面是一些面对代码重复和逻辑重复时如何提高开发效率的解决方案。希望对大家有所帮助。在没有路径提示的vscode中使用@为了操作方便,我们经常在webpack中配置@指向项目的src目录,但是vscode的路径提示不识别@,导致写导入路径时没有提示,只是用手打字。解决方法:下载vscode插件PathIntellisense,在vscode设置文件中配置如下:导入公共组件的代码很繁琐。每次使用公共组件,都需要编写导入代码:importMaterialfrom'@/components/common/Material'解决方法:将公共组件注册为全局组件,可以省去引入组件的工作量。//注册全局公共组件letcontext=require.context('@/components/common/',true,/\.vue$/)context.keys().map(key=>{constcomponent=context(key).defaultVue.component(component.name,component)})这里使用require.context,根据公共组件目录导入所有公共组件。使用公共组件的代码非常繁琐。当我们使用一个组件时,它的组件名称、传递的参数、自定义的事件等都需要手动输入,如下:vAuth="()=>35"/>解决方法:公共组件在代码中维护一个使用demo的组件,方便使用时快速复制。以前的工作量减少到仅仅复制和修改绑定值。强烈建议组队表演。维护公共组件的文档和示例页面提供以下功能:维护组件输出参数、输入参数和方法。当然,维护这些信息需要付出很多努力,而且它很容易落后于代码。但是我创建组件文档页面的主要目的是让开发者知道当前项目中封装了哪些组件,直观的看它长什么样子,实现了哪些功能。避免因为无知而重复开发或造轮子,让公共组件发挥更大的价值。提供demo代码的复制功能,快速引入组件,减少使用组件的工作量,无需使用vuepress等框架:为了将文档页面集成到项目中,而不是单独的项目中,方便与框架对比时维护和浏览。这样开发方便,定制不受限制。有一些代码片段出现的频率很高。我们需要去二次打包,所以可以使用vscode的snippets来帮助我们节省工作量。但是使用vscode原生snippet的体验非常糟糕:我们需要按照逗号将代码按行分隔作为输入。根据经验,你能找到的问题一般都有解决方案:我们可以使用插件——snippets,它可以快速方便地创建、编辑和插入代码片段。
