如何釋出一個公共的 vue 元件到 npm
參考文章：https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/
介紹一下如何將一個寫好的元件釋出到公共的 npm 上，可以讓其像其它外掛一樣下載使用。
一、全域性安裝工具 vue-sfc-rollup
npm i -g vue-sfc-rollup釋出一個 vue 元件，需要配置不少東西，並要符合釋出 vue 元件的內容格式，這個過程可以通過 vue-sfc-rollup 這個工具來實現，它簡化了需要釋出 vue 元件的過程，好讓你只需要關注元件的實現。
二、使用 vue-sfc-rollup 初始化專案
在你需要建立這個 vue 元件的資料夾中執行初始化操作，然後就會進入初始化程式，這個過程跟新建一個 vue 專案差不多。
sfc-init1. 這個元件用於哪個版本 v2 還是 v3
2. 是一個元件庫還是隻是一個單獨的元件
3. 輸入這個專案名
4. 這個元件名是
定義元件名，預設跟專案名一致，也可以自己定義名字
5. 這個元件使用 js 還是 ts 編寫
6. 輸入盛放元件檔案的目錄位置，預設在專案根目錄
如果是單元件專案，放在根目錄也無妨
7. 自此，這個元件專案就初始化完成了
專案目錄如下：
三、實現元件的功能
不要被上面的目錄結構嚇到，你不需要理解每個目錄的作用，把這個當成一個普通的 vue 專案就可以，在你定義的元件檔案中實現你的程式碼邏輯。
你可以根據自己需要新增 scss 支援什麼的。
比如我的 kyle-password-pad 元件中就用到了 scss ，所以我安裝了 scss 支援，並新增了自己常用的一些通用方法庫和 scss 變數庫。再提示一遍，這專案就只是一個普通的 vue 專案，放心大膽的寫就可以了。
1. 安裝專案依賴
先安裝依賴，用 npm 或 yarn 都可以，我喜歡用 yarn
npm i
# 或
yarn 2. 執行檢視初始狀態
安裝依賴之後，可以直接執行 npm serve 來執行這個專案，就可以看到專案初始狀態了
npm run serve 就能看到初始的專案狀態了，它給放了一個簡單的小例子，如下：
3. 好了，現在可以修改你的 vue 檔案，實現自己的功能了
我放了一個數字輸入的 pad，並新增了 scss 支援，全程式碼可以看 github 專案例子，就不放原始碼了，佔篇幅。
github kyle-password-pad:
我的例子是這樣的
四、釋出之前完善一下你的元件包資訊
在生成最終的釋出檔案之前，最好完善一下你這個元件的資訊，開啟 package.json 檔案，完善一下上面的說明檔案內容，版本號最好以 0.0.1 開始，比如我的是：
五、生成釋出用的程式碼
vue 元件的釋出包中需要包含這三種檔案
幸運的是，有了 vue-sfc-rollup 這個工具之後，你只需要執行一下 build 指令即可自動生成。
在你 serve 測試完成你的元件功能之後，就可以執行下面指令來生成最終發現需要的檔案了。
npm run build 六、釋出你的 vue 元件包
1. 註冊 npm 賬號
釋出元件包，需要你登入 npm，如果沒有 npm 賬號，去官網註冊一下： https://www.npmjs.com/
2. 命令列登入 npm
註冊完成之後，回到命令列，執行以下指令登入到 npm
如果登入失敗，可能是因為你目前使用的不是官方的 npm 源地址，國內很多開發者都因為網速慢，而切換到了 騰訊或淘寶的 npm 源。但這些源是不認 npm 的官方賬號的。
具體解決方法詳見： NPM login 的時候出錯，無法登入，解決
npm login
3. 釋出元件
登入完成之後，切換到你的元件專案目錄，就可以釋出元件了
npm publish
這就釋出完成了，這個名為 kyle-password-pad 的包，已經可以被全世界的 vue 開發者使用了。
七、將剛才釋出的元件新增到自己的 vue 專案中看看
釋出之後，最好完善一下你這個元件的 github 地址資訊什麼的，每個 npm 包都對應著一個 github 專案地址，這個方便其它開發者查閱。
既然元件已經發布了，就可以像使用其它 vue 元件那樣引入到自己專案中進行使用了。
1. 安裝這個元件
npm i kyle-password-padpackage.json 裡就能看到這個包的身影了
2. 在頁面中使用它
引入它，使用它
再看頁面中的樣子，能正常使用和顯示！
