寫在前面：有開發過小程序的朋友肯定知道組件化開發的特性，高內聚與低耦合。使用已有的UI組件庫，諸如：vantUI-weapp、minUI-weapp等UI組件庫的誕生使我們的開發速度大大的加快，豐富的組件拿來即用【更多的UI組件庫、框架可查看我的另一篇博客移動端、PC端（前后台）、小程序常用的UI框架。】，但是大家有沒有遇到過只想使用某個組件庫的某個單一功能、或者想把組件庫中優秀的組件集合到自己的組件庫中，或者說想開發自己的UI組件庫看了官網文檔卻無從下手呢，接下來，請跟隨我，從零開發一款自己的小程序UI組件庫，並將其上傳至npm供他人學習使用。
特別注意：此處的從零開發，並不是指從沒接觸過小程序的小白，開發組件庫的前提是：①熟練使用css3布局以及js（es6）編寫；②熟悉小程序已有組件及API，同時至少開發過小程序；③了解node、npm、熟悉git。
本節為基礎部分
1.下載小程序組件模板（官方地址），【默認大家對node、npm、命令行都有所了解】
全局安裝命令行工具，執行：
npm install -g @wechat-miniprogram/miniprogram-cli
在某盤符下新建一個空目錄，暫將其命名為：mineui（注意：須使用全英文小寫，命名就要對它負責請慎重），以此空目錄作為項目根目錄，執行：
miniprogram init --type custom-component
執行中會填寫一些項目信息，一路回車即可。完成后，會在mineui下生成項目基礎文件，我們會在此基礎上開發我們的組件庫。
2.運行項目
首先安裝依賴，執行：
npm install
然后運行項目，執行：
npm run dev 或者 npm run watch
可以看到在項目目錄中，多了一個miniprogram_dev的目錄，這就是我們編寫組件后的預覽目錄，這個時候就要請出我們的微信發開着工具了（注意基礎庫版本調整至2.2.1以上），執行導入項目，目錄選擇我們剛剛創建的mineui文件夾下的miniprogram_dev目錄，appid使用測試號。點擊導入后，即可預覽初始化的項目。
3.了解各個文件的作用
①miniprogram_dev目錄：執行npm run dev || npm run watch（實時編譯）后的生成文件，此目錄及最終的小程序頁面、組件結構；
②src目錄：存放我們要編寫的目標組件，也是打包后需要上傳的文件，非常重要！
③tools目錄：其中的demo文件夾即我們運行時的頁面框架，需要注意配置json文件，與開發普通項目一致。此目錄下的config.js文件也非常重要， entry 字段即為src目錄下需要打包的組件目錄，['index']即指此時只打包src目錄下的第一層index相關文件。如果我們想開發多組件庫，則需要在src目錄下創建多個文件夾來存放組件，如：我們要寫一個自己的button組件，則在src目錄下創建button文件夾，在此文件夾下創建index.js、index.json、index.wxml、index.wxss，同時修改 entry 字段為：['index','button/index']。需要注意的是，當我們刪改src下的文件目錄時，同時也要修改 entry 字段，否則在執行命令時報錯，導致失敗。
4.打包並上傳至npm
①首先，我們需要有自己的npm賬號，注冊地址。
②在項目根目錄，執行：
npm login
輸入剛剛注冊的用戶名、密碼、郵箱。需注意的是，如果登陸失敗，大多原因是由於使用了非 npmjs.org 官網的 registry，執行：
npm config set registry https://registry.npmjs.org/
將npm源切換到npmjs.org 官網的 registry。
③驗證是否登陸成功，執行：
npm who am i
返回當前登錄的用戶名
④執行：
npm publish
此時，我們的初始化組件模板就推送到npm官網了，掌聲送給你自己吧O(∩_∩)O哈哈~。接下來，我們去npm官網查看自己的組件庫，並且下載到一個全新的小程序項目里，查看下效果吧。
如果想刪除npm包，或者只想刪除npm包下的某個版本，可執行（需慎重，可能你的項目已經被多人使用予以厚望）：
npm unpublish --force //強制刪除
npm unpublish guitest@1.0.0 //指定版本號
5.下載npm包並驗證
①打開npm官網，搜索剛剛創建的項目，我的名稱叫mineui，大家搜自己的名稱即可。找到了：
可以看到，當前mineui僅有一個版本，而且readme文件也是官方模板，還沒有修改過，后面會做改動（markdown語法學習）。
②將組件庫安裝到現有的或者全新的項目中，我這邊用一個全新的項目做演示。
再打開一個微信開發者工具，執行新建項目流程，信息自填，比如說：我的小程序項目命名為：mine-weapp。
初始化項目后，在項目根目錄執行：
npm init
同樣一路默認回車，成功后項目根目錄下會生成package.json、project.config.json兩個文件
在我們的npm組件庫中，會看到如何安裝，我們執行（每個人的包名都可能不一樣哦，需注意）：
npm i mineui -S --production -verbose
-S即為--save，添加–production選項，可以減少安裝一些業務無關的 npm 包，從而減少整個小程序包的大小。-verbose 是為了輸出詳細信息（可以不要），英文翻譯是冗余的意思。
執行完畢，我們在開發者工具中操作：工具→構建npm，同時在右側的詳情中勾選【使用npm模塊選項】
我們會發現在項目根目錄下會生成miniprogram_npm目錄，這個就是開發者工具構建出來的模塊，那我們如何引用他呢？
③由於對剛剛初始化的組件模板沒有做任何修改，我們現在修改新創建的小程序的根目錄下的app.json文件，新增usingComponents字段：
"usingComponents": { "comp": "mineui/index" },
在pages→index→index.wxml文件中最下方添加組件：
<comp />
編譯后發現，我們的組件已經成功渲染到小程序頁面中：
至此，初始化組件庫模板、模板文件概述、模板上傳npm、npm包文件下載至本地並運用到項目就講解完了。
本節物料下載：mineui-weapp組件庫v1.0、weapp-for-mineui程序v1.0
后續我會逐一講解：基礎UI組件庫的搭建和豐富、如何在本地使用npm link調試npm包項目。
由於工作原因，后續不定時更新，請見諒、、