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

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

[[402789]]

vscode中使用@沒有路徑提示

為了方便操作，我們經(jīng)常會(huì)在webpack中配置@指向項(xiàng)目的src目錄，但是vscode的路徑提示并不認(rèn)識(shí)@，導(dǎo)致寫引入路徑時(shí)沒有提示，純手敲。

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

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

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

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

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

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

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

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

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

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

解決方案：

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

維護(hù)一個(gè)公共組件的文檔、示例頁

提供了以下功能：

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

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

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

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

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

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