1.使用webpack-******模板建立乙個vue專案，命令：vue init webpack-****** kingtreebtn ,新建專案目錄如下：
2.在src目錄下新建lib目錄存放元件原始碼
3.元件封裝完後新建元件出口檔案index.js，檔案內容如下：
4. 修改package.json檔案
5.修改webpack.config.js檔案
6. 執行npm run build 命令，打包後的資料夾為dist
7. 執行npm pack命令，生成kingtreebtn-1.0.0.tgz壓縮包
8. 執行npm install 路徑\檔名 命令安裝，安裝後直接在測試專案的入口檔案main.js內引入，和elementui一樣
import 名稱 from '元件庫名'
vue.use(名稱)；
可用則代表打包成功
9.發布到npm上
9.1 npm login 登入到npm上
9.2 npm version patch 版本迭代，每次更新時都要輸入這個命令 或者 直接修改package.json中的版本號
9.3 npm publish 提交到npm上，完成
注意：npm官方註冊時，一定要驗證郵箱，否則提交的時候會報403 forbidden
封裝vue元件庫，發布npm
元件庫的開發和平時專案中元件的開發過程是一樣的，不同的是元件庫作為乙個外掛程式使用，使用vue.use 註冊外掛程式。vue.use方法可以接收乙個函式，如果是函式會直接呼叫這個函式 可以傳入物件，傳入物件，會呼叫這個物件的install方法。vue規定外掛程式應該暴露乙個install方法。這個方...
教你一步步封裝 Vue 元件並發布到 npm
在開發專案過程中，通常會用到很多功能和設計相類似的元件，為了避免重複造輪子，我們經常會用到一些第三方元件，比如 vux，vant。但是這樣會引入太多沒用到的元件，造成打包體積過大。所以我們有必要封裝一些基礎的元件用於開發。下面我為大家介紹如何封裝vue的toast和dialog元件並上傳到npm。掘...
vue元件發布到npm，類似element ui
1.建立webpack 類專案 vue init webpack demo 2.目錄 3.編寫元件 packages timer就是編寫的元件，跟普通元件無差別，這裡只是用於測試 4.修改package.json 畫紅線部分即是需要修改或新增的內容 5.修改webpack.config.js 畫橢圓...