Vue自動安裝常用工具的node外掛程式

由於經常使用vue開發移動端專案，每次需要vuex和移動端適配，每次需要自己手動新建vuex所需的js檔案，使用vw進行移動端適配也需要安裝一大堆依賴，感覺很麻煩，所以考慮自己寫了乙個簡單的外掛程式，可以自動新建vuex需要的檔案和適配所需的相關配置，順便熟悉一下新學的node。

首先新建了乙個src檔案，由於外掛程式內容不是很多，所以就只有乙個index.js和乙個util.js乙個放外掛程式的核心**，乙個是所需要的功能方法; 然後，安裝了幾個依賴 inquirer.js 和 shell.js。inquirer.js 是乙個使用者與命令列互動的工具，因為這個外掛程式是需要使用者來選擇相關的選項的，而且inquirer.js個人感覺用起來比較簡單，下面是與使用者互動的相關**:

inquirer
.prompt([,,}
]).then(answers => );
複製**

現在，基本上就可以實現互動效果，answers中會返回一些使用者選擇的相關選項,然後再根據相關的選擇執行相關**; 這裡先說下 vuex的相關**，使用shell.js可以直接執行shell命令，所以當使用者選擇使用vuex中，肯定是先通過shell.js安裝一下vuex，但是只有這個肯定是不行的，還需要將我之前說的vuex相關的檔案匯入到vue專案中的對應位置,這裡就用到了node的path和fs模組，剛開始的時候我是直接手動寫了每個js需要的內容，直接for迴圈然後新建js檔案，fs模組寫入相關**，但是這樣有個問題就是，**雖然寫入了，但是檔案沒有自動格式化，中間會有很多空格，後來又想到了乙個更好的方法，就是又新建了乙個template資料夾，然後寫了乙個store資料夾，裡面把需要的action.js mutation.js等等都直接寫入，然後直接將檔案全部寫入對應位置，下面是處理vuex相關**

// index.js   __root__: process.cwd()
if (answers.vuex) 
// util.js
// 複製資料夾到指定目錄下
copyfile: function (src, dst) 
paths.foreach(function (path) 
// 判斷是否為檔案
if (st.isfile()) 
// 如果是目錄則遞迴呼叫自身
else
if (st.isdirectory()) 
});});
});},
// 判斷資料夾是否存在，不存在需要先建立目錄
existsfile: function (src, dst, callback)  else );
}});
},複製**

這裡要注意 process.cwd() 和 __dirname 的區別，乙個是專案的當前執行目錄，乙個是**的目錄. 這個功能實現後，完成vw的適配**就相對簡單了很多，原理也是一樣，通過node讀取並修改css配置檔案，通過shell安裝所需依賴。相關**如下:

// index.js   __root__: process.cwd()
if (answers.units === 'vw') 
// util.js
// 配置 vw 單位
flexutilvw: function (width, height) ,
"cssnano": 
}test.plugins = object.assign({}, plugins, obj);
console.log(test)
fs.writefile(url, 'module.exports=' + json.stringify(test), 'utf8', (err) => );
}複製**

上面基本是這個簡單外掛程式的核心思路與**，目前還有乙個問題就是vw配置只是可以在vue-cli 2的版本搭建的vue專案可以使用 vue-cli3的由於配置路徑不同，所以不可以使用，這也是我第一次寫的node相關的專案，**和思路肯定有很多不足的地方，還希望大神們能給我更合理的建議。

Vue自動安裝常用工具的node外掛程式

linux常用工具安裝

CentOS常用工具安裝

Linux常用工具安裝

Vue自動安裝常用工具的node外掛程式

linux常用工具安裝

CentOS常用工具安裝

Linux常用工具安裝

相關推薦