在開發(fā)迭代過程中，很多重復的代碼、邏輯讓會增加我們的工作量，讓我們很苦惱，面對這種情況，我們需要提高開發(fā)效率，從重復中解放出來。

下面是面對重復的代碼、邏輯，如何提高開發(fā)效率的一些解決方案，希望對大家有所幫助。

[[402789]]

vscode中使用@沒有路徑提示

為了方便操作，我們經常會在webpack中配置@指向項目的src目錄，但是vscode的路徑提示并不認識@，導致寫引入路徑時沒有提示，純手敲。

解決方案： 下載vscode插件Path Intellisense，并且在vscode setting文件中如下配置即可：

引入公共組件的代碼很繁瑣

公共組件每次使用的時候，都需要寫引入的代碼：

import Material from '@ 
/components/common/Material' 

解決方案： 把公共組件注冊成全局組件，就可以節(jié)省引入組件的工作量。

// 注冊全局公共組件 
let context = require.context('@/components/common/', true, /\.vue$/) 
context.keys().map(key => { 
  const component = context(key).default 
  Vue.component(component.name, component) 
}) 

這里用到了require.context，根據公共組件目錄來引入所有的公共組件

使用公共組件的代碼很繁瑣

我們使用一個組件時，它的組件名、傳參、自定義事件等都需要手敲，如下：

<Material 
title="議題材料" 
:materials.sync="material" 
:annotation.sync="annotation" 
:vAuth="() => 35" 
/> 

解決方案：

公共組件的代碼中，維護一個組件使用demo，以供使用時快速復制。以前的工作量減少到了只需要復制、修改綁定值即可。強烈建議在團隊中執(zhí)行。

維護一個公共組件的文檔、示例頁

提供了以下功能：

• 維護組件的出參、入參、方法。當然維護這些信息需要很大的精力，而且這些信息很容易落后于代碼。
• 但我創(chuàng)建組件文檔頁的主要目的，是為了讓開發(fā)者了解到，當前項目有哪些已經封裝的組件，并且很直觀的看到它是什么樣子并且實現(xiàn)了什么功能。避免因為不了解，而重復開發(fā)或者造輪子，讓公共組件發(fā)揮更大的價值。
• 提供demo代碼的復制功能，快捷引入組件，減少使用組件的工作量
• 沒有使用vuepress等框架： 為了把文檔頁整合進項目中，而不是一個單獨的項目，這樣維護、瀏覽時很方便 對比與框架，這樣開發(fā)便捷，自定義不受限制

有一些代碼片段，出現(xiàn)的很頻繁

項目開發(fā)中，會發(fā)現(xiàn)一段js邏輯、html，在某種場景下，出現(xiàn)的很頻繁，但他們其實已經很簡潔，又不需要再去二次封裝，所以我們可以使用vscode的snippets來幫助我們節(jié)省工作量。 但vscode原生的snippets的使用體驗非常不好：

我們需要把代碼根據逗號按行分隔開作為輸入，不僅工作量很大，而且代碼這樣處理后已經無法直觀地理解。

根據經驗，你能發(fā)現(xiàn)的問題，一般情況下早已有了解決方案：

我們可以使用插件——snippets，它可以很快捷方便的新建、編輯、插入代碼片段。