vue開發中的技巧，模塊自動化引入

在開發VUE 工程項目的時候， 咱們一般會遇到一個場景，就是一個文件引入了 不一樣的模塊 。

例如，我如今的項目，compoents文件夾下 是我全局的公共組件。

咱們一般可能會在main.js（我是在compoents建立了 一個export.js ，做爲我所有公共組件的導出的文件,而後在main.js引入exprot文件） 依次的導入 compents文件夾下的組件 , 再將組件 註冊到Vue全局組件上。

例如：

這樣寫起來是能夠的。可是每次增長一個全局組件，就須要在這裏從新引入一遍，仍是比較麻煩的。並且感受很不靈活。那我們有沒有其餘的方法呢？固然是有的了。

那麼下面給你們分享一個webpack的提供的api。require.context()函數。學會了終身受益阿，哈哈哈。

那麼我先給你們介紹一下這個函數。

這個函數呢， 能幫咱們幫咱們獲取一個模塊的上下文。

它一共接收三個參數 : 

@params  [ directory ]  { String } - 要讀取文件的路徑

@params [ useSubdirectories ] { Boolean } - 是否查找子目錄

@params [ re ] [ RegExp ] - 匹配文件的正則表達式

用法：const file = reqire.context('@/components/',true,/index\.vue$/)

表明我要讀取 compoents文件夾下 結尾是index.vue的文件 而且查找文件夾的子目錄 

這個方法，又返回一個函數，而且這個函數有三個屬性。（注意函數也是對象 是能夠隨意擴展屬性的，日常咱們遇到比較多的多是返回個對象 對象有一些屬性，可是file是能夠執行的函數 而且這個函數是個關鍵奧）

先說一下返回的file 函數的三個屬性。

@return [ keys ] { Function } 返回的是一個數組。數組存放的 我理解是 匹配文件的相對路徑。

@return [ resolve ] { function } 接收一個參數 是String類型，參數是keys()數組返回的某一個文件的相對路徑 。例如file.resolve(file.keys()[0]) ，這個函數 返回一個字符串 是相對於整個工程的相對路徑。

@return [ id ] 執行環境的id,返回的是一個字符串。

我給你們打印出來看看，

如今再說一下file函數 ， file函數 接收的參數 是String類型， 跟file.resolve方法接收參數同樣。

是匹配文件的相對路徑，而且包含在file.keys()數組內。

咱們在看一下執行 file函數 返回的結果 

file(file.keys([0]));

是一個Module對象，Module對象下 又一個default屬性 ， 這個屬性就是咱們這個組件的引用了。至關於 咱們 import nfList from './components/nf-list/index.vue' 中的 nfList 對象。

如今拿到了這些數據 ，咱們來愉快的優化一下export.js文件中的代碼 。

如今只用6行代碼， 就幫咱們完成了全局組件的自動註冊 ， componets文件下的組件自動查找。不再用咱們一個個的improt了 。代碼是否是一會兒變得簡潔很多啦。

固然還有不少地方能夠 改造 ， 比咱們的路由 拆分，指令拆分 ， 還有vuex中的module引用 ， 均可以用這個動態的自動化導入模塊。

第一次分享，可能有不少地方寫的不太好，請你們多多指點，共同窗習哈～～