在前端開發中可能會遇到將相同的功能模板集合成一個組件，供他人調用，這樣可以減少重復造輪子，也可以節約人力、財力，更能夠提高代碼的可維護度；下面將通過詳細的步驟教你如何構建一個Vue前端組件。
1、在本機上安裝好NodeJs，並配置好環境變量
（1）NodeJs的下載地址：點擊進入下載頁面
我這里是下載64位Windows安裝包(.msi)，大家可以根據自己電腦系統選擇相應的版本即可。
（2）下載NodeJs后雙擊它，采用默認設置，一直點擊下一步，直到Finish為止。需要說明的是，在安裝NodeJs時，已經設置好了系統環境變量，此外npm工具也同時被安裝好了，我們可以在cmd窗口中輸入node -v命令和npm -v命令查看，若都安裝成功了話，會看到如下的效果：
（3）設置全局包存放路徑，這里不采用默認路徑，通過npm命令來實現目錄的修改，我這里是將全局包存放目錄放置在NodeJs的安裝目錄下：
- 首先在NodeJs的安裝根目錄下創建兩個文件夾：node_global和node_cache，前者是用來存放下載的全局包，后者是用來存放node的緩存
- 在cmd窗口中分別輸入這兩條命令，完成對node_global和node_cache的設置：
npm config set prefix "E:\Program Files\nodejs\node_global"
npm config set cache "E:\Program Files\nodejs\node_cache"
最后我們可以通過npm config list命令查看一下剛才的配置，若有如下信息，則表明設置成功了。
以上就是NodeJs環境的安裝和配置情況，若你的電腦之前已經安裝好NodeJs，可以省略上面這些過程；接下來我們試試下載vue模塊。
2、下載vue模塊
（1）在cmd窗口中輸入npm i -g vue命令，就可以等待下載vue模塊了，此時可能會下載失敗，如下圖所示：
這是因為registry地址默認是https://registry.npmjs.org，被牆擋住了，翻過去的話有點麻煩，這個時候你可以采用淘寶的鏡像地址https://registry.npm.taobao.org，在cmd窗口中輸入npm config set registry "https://registry.npm.taobao.org" ，敲入回車鍵后沒有任何提示就表明設置成功了，我們也可以通過npm config list命令來查看一下，如下圖所示：
在設置好registry地址后，重試npm i -g vue命令，下載成功后如下圖所示：
（2）為了能夠使用vue命令，我們還的安裝一下vue的腳手架vue-cli，在cmd窗口中輸入npm i -g vue-cli，敲入回車鍵后就開始下載了，等到下載完成后會出現如下圖的類似信息：
從上圖中可知Vue CLI的版本是2.9.6。
3、開始創建組件庫工程
（1）在cmd窗口中輸入vue create bienVueCom，敲回車鍵后結果收到這樣的提示信息，如下圖所示：
原來是vue create命令只是Vue CLI 3版本的命令，Vue CLI 2.9.6版本不支持該命令；於是按照提示修改即可，首先在cmd窗口中輸入npm uninstall -g vue-cli命令，卸載現有的vue-cli腳手架；等卸載完后再輸入npm i -g @vue/cli開始安裝，等待安裝完后信息如下圖所示：
（2）現在可以正式創建組件庫工程了，在cmd窗口中輸入vue create bienVueCom，回車后提示如下圖所示：
既然工程名稱不能包含大寫字母，那么我們采用短橫線來鏈接，如：bien-vue-com；修改好名稱后按下回車鍵，后續的步驟就使用默認設置，若有需要就按回車鍵即可；接着就是靜靜地等待工程自動創建完畢。最終成功時的效果如下圖所示：
我們進入bien-vue-com目錄中，可以看到默認的工程目錄結構如下圖所示：
我們首先看看package.json文件的默認內容都有哪些配置參數，如下圖所示：
針對這些默認配置項，基本上可以不用修改，不過為了能夠向外部提供組件，須修改private字段的值為false，同時還需要新增main字段，它代表入口文件，指向最終編譯后的包文件，在這里其值設置為“./dist/bien-vue-com.common.js”；此外，在scripts字段中新增一個命令腳本，如："build-lib": "vue-cli-service build --target lib --name bien-vue-com ./src/index.js"；在該命令中--target屬性表示構建目標，默認為應用模式，這里需要設置為lib，表示啟用庫模式；--name屬性表示構建的名稱，可以與package.json文件中的name字段的值不相同；最后一個參數表示入口文件，默認為src/App.vue，在這里我們修改為了./src/index.js。最終的修改情況如下圖所示：
接下來，我們在src目錄下建立一個index.js文件，我們試着將componets/HelloWord.vue組件導出，而HelloWord.vue是構建工程時默認生成的。下圖是index.js文件的內容：
在上圖中可以看出導出的是ComponentsLib，若是還想導出其它的、自己創建的vue文件，可以類似於添加HelloWord組件一樣進行添加。接着在bien-vue-com目錄下打開cmd窗口，輸入npm run build-lib命令，編譯結果如下圖所示：
在bien-vue-com的目錄下會生成dist文件夾，其里面的文件如下圖所示：
到此，組件已經完成構建了。
4、發布組件到npm
由於我沒有弄具體的賬號了，在這里說一下步驟吧，在bien-vue-com目錄下打開cmd窗口。
（1）設置npm的registry地址：在cmd窗口中輸入npm config set registry “需要發布的npm地址”
（2）使用賬號登錄npm：在cmd窗口中輸入npm login，后續就按提示輸入正確的信息即可。
（3）發布：在cmd窗口中輸入npm publish，按下回車鍵即可。
5、測驗組件庫效果
我在另外一個前端工程中集成剛生成的組件，本來是需要通過npm命令來下載的，這里就不做下載處理了，直接將生成好的組件整理放在一個文件夾中，該文件夾的名稱就是包名稱，也就是package.json文件中name字段所對應的值，在這里就是bien-vue-com文件夾名稱。將生成的dist文件夾拷貝到剛才新建的文件夾bien-vue-com，同時還需要將package.json和README.md文件也拷貝到bien-vue-com文件里，整體情況如下圖所示：
接着將新建的bien-vue-com文件拷貝到目標工程的node_modules目錄下，如下圖所示：
然后在目標工程的package.json文件里找到dependencies配置項，在其中添加"bien-vue-com":"0.1.0"配置項，然后在目標工程的main.js文件中引入該組件，如下圖所示：
最后，在目標工程中新建一個testView.vue文件，用來調用引入的組件，其內容如下圖所示：
所有的配置都准備好后，此時就是運行目標工程，看看實際調用組件的效果，如下圖所示：
自此，整篇文章已介紹完了如何構建組件庫，如何使用組件庫的全部流程了，基本上能夠滿足實際項目需求了。
6、調試組件庫
開發過程中需要調試構建的組件庫，為了能夠讓組件庫編譯好后直接輸出到目標工程中的node_modules目錄下，同時也為了能夠支持目標工程實時看到更新組件庫后的變化情況，我們可以在組件庫中這樣設置：
（1）在構建組件庫的工程跟目錄下建立一個vue.config.js文件，也就是讓該文件與package.json文件處於同一級，如下圖所示：
（2）在vue.config.js文件中新增如下內容：
（3）在組件庫工程的package.json文件中添加腳本命令，如下圖所示：
------20191213閃