Vue元件封裝併發布到npm
1. 環境準備
（1）初始化Vue專案
vue create my-app
（2）執行專案
npm run serve
2. 元件封裝
2.1 新建package資料夾
因為我們可能會封裝多個元件，所以在src下面新建一個package資料夾用來存放所有需要上傳的元件。
這裡我們打算封裝兩個元件：t-button、thp-input，所以在package資料夾下面分別新建了存放兩個元件程式碼的資料夾。
2.2 編寫元件程式碼
這裡我們就以thp-button元件為例，程式碼如下：
2.3 使用Vue外掛模式
這一步是封裝元件中的重點，用到了Vue提供的一個公開方法：install。這個方法會在你使用
在package目錄下新建index.js檔案，程式碼如下：
export default install; // 這個方法以後再使用的時候可以被use呼叫
import ThpButton from "../package/thp-button/index.vue"; // 引入封裝好的元件
import TButton from "../package/t-button/index.vue"; // 引入封裝好的元件
const coms = [ThpButton,TButton]; // 將來如果有其它元件,都可以寫到這個數組裡
// 批量元件註冊
const install = function (Vue) {
coms.forEach((com) => {
Vue.component(com.name, com);
});
};
export default install; // 這個方法以後再使用的時候可以被use呼叫
上傳程式碼主要的的一項工作就是將我們封裝好的元件註冊為全域性元件，用到了Vue.component()方法，當使用Vue.use()時，我們的install方法便會執行。
3. 元件打包
到這裡為止，我們的元件封建基本就完成了，當然元件封裝成什麼樣得看自己得業務需求了，接下來我們就需要將元件進行打包了。
修改我們專案得package.json檔案，配置打包命令：
"package": "vue-cli-service build --target lib ./src/package/index.js --name thp-button-ui --dest thp-button-ui"
打包命令解釋：
--target lib 關鍵字 指定打包的目錄
--name 打包後的檔名字
--dest 打包後的資料夾的名稱
然後執行打包命令：
npm run package
打包執行完成後我們專案目錄下就會多出一個thp-button-ui資料夾，存放的是打包後的檔案
4. 釋出到npm
4.1 初始化package.json
想要釋出到npm倉庫，我們還得在thp-button-ui資料夾下初始化一個package.json檔案。進入thp-button-ui目錄，執行命令：
npm init -y
由於這裡我們只是測試，所以我不需要更改package.json檔案，如果是生產的話，最好加上版本描述和版本號等等，其中name欄位便是我們上傳到npm倉庫後的名稱。
4.2 釋出到npm倉庫
（1）註冊賬號
想要釋出到npm倉庫，就必須要有一個賬號，先去npm官網註冊一個賬號，注意記住使用者名稱、密碼和郵箱，釋出的時候可能會用到。
（2）設定npm源
有些小夥伴可能本地的npm映象源採用的是淘寶映象源或者其它的，如果想要釋出npm包，我們得吧我們得npm源切換為官方得源，命令如下：
npm config set registry=https://registry.npmjs.org
（3）新增npm使用者
進入thp-button-ui目錄，新增npm使用者，執行命令：
npm adduser
這裡會讓你填寫使用者名稱等等，如果之前設定過即可跳過此步。
（4）釋出npm
在thp-button-ui目錄下執行命令：
npm publish
如果釋出失敗可能是名字重複了，改了名字即可，釋出成功後，我們即可到npm網上檢視自己釋出得npm包
5. 從npm安裝使用
直接執行安裝命令：
npm install thp-button-ui // 由於名字重複，改了個名字
然後在main.js引用註冊，程式碼如下：
import ThpButton from 'thp-button-ui'
import 'thp-button-ui/thp-button-ui.css'
Vue.use(ThpButton);