作為一個不專業的前端，在開發前端的時候我喜歡用一些UI庫。HTML頁面一般習慣用bootstarp，layui等。VUE項目一般習慣用iview，elementui等。
小程式自然也不例外，我這裡使用的是官方推薦的weui元件庫，但是如何将其引入項目，這是一個很值得深思的問題。
最終我還是選擇了VUE一樣的管理方式，使用npm。
Vue的腳手架預設就是支援npm的。但是小程式需要你手動安裝。
當然，這部分官方文檔是有介紹的，想看官方文檔的同學，請移步《npm支援》
寫這篇部落格的原因就是，官方文檔我看不懂，反正我是搞不清楚文檔是怎麼讓他們寫成這樣的。
一：打開小程式項目
我這裡指的是打開小程式項目的檔案目錄，如下圖所示：
在目前目錄下打開指令行視窗（cmd）當然，我這裡指的是windows系統。
如下圖所示：
（1）：初始化npm
npm init
指令行裡會以互動的形式讓你填一些項目的介紹資訊，依次介紹如下：（不知道怎麼填的直接回車、回車…）
name 項目名稱
version 項目的版本号
description 項目的描述資訊
entry point 項目的入口檔案
test command 項目啟動時腳本指令
git repository 如果你有 Git 位址，可以将這個項目放到你的 Git 倉庫裡
keywords 關鍵詞
author 作者叫啥
license 項目要發行的時候需要的證書，平時玩玩忽略它
（2）：安裝npm
（3）：在項目根目錄下建立node_modules 空目錄
（4）：進入剛剛建立的node_modules目錄，在目前目錄下，打開cmd
（5）：執行安裝第三方UI庫的npm.包指令：我這裡安裝的是weui
npm install --save weui-miniprogram
執行成功之後，你會發現你想安裝的第三方UI庫的包已經下載下傳到node_modules目錄中，如下圖所示：
然後，你項目的目錄檔案如下圖所示：
二：配置微信開發者工具支援npm
這個很簡單，如下圖所示：勾選紅框标注的使用npm子產品：
然後，點選菜單欄 工具->建構npm，将你剛剛使用npm安裝的插件內建到項目中。
如下圖所示：
建構成功之後，項目檔案根目錄會多出一個miniprogram_npm目錄，這個就小程式建構npm所生成的目錄。
如下圖所示：
将weui的css樣式引入全局css檔案中，便于全局使用：
/*引入weui庫*/
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
這樣，就可以在全局使用weui的樣式了。
最後可能需要注意一下：
每當你通過 npm 安裝一個第三方庫時，記得别忘記重新建構一下（點開左上角工具->選中建構npm）
這個很重要。
有好的建議，請在下方輸入你的評論。
歡迎通路個人部落格
https://guanchao.site
歡迎通路我的小程式：