如何使用vue腳手架構(gòu)建庫并發(fā)布到npm？下面本篇文章給大家介紹一下基于vue腳手架構(gòu)建庫并發(fā)布到npm的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
構(gòu)建庫的常見方法有兩種：一種是自己手動構(gòu)建webpack庫打包，設(shè)置output為 library; 另一種是基于vue-cli3輸出庫資源包。我們采用第二種vue腳手架的方式構(gòu)建庫。
新增編譯庫命令
// package.json "scripts": { // ... "lib": "vue-cli-service build --target lib --name step --dest dist packages/index.js"}// packages/index.js 默認打包stepimport step from '../steps/src/step';step.install = function(vue) { vue.component(step.name, step);};export default step;--name: 庫名稱。--target: 構(gòu)建目標(biāo)，默認為應(yīng)用模式。這里修改為 lib 啟用庫模式。--dest: 輸出目錄，默認 dist。[entry]: 最后一個參數(shù)為入口文件，默認為 src/app.vue。
更多詳細配置查看 ? vue腳手架官網(wǎng)
如果該庫依賴于其他庫，請在vue.config.js 配置 externals
// vue.config.jsmodule.exports = { configurewebpack:{ externals: { vue: 'vue', 'vue-router':'vuerouter', axios: 'axios' } }}執(zhí)行 npm run lib 就可以發(fā)現(xiàn)我們的庫被打包到了 根目錄的dist文件夾下。
添加 .npmignore 文件（可選）
和 .gitignore 的語法一樣，具體需要提交什么文件，看各自的實際情況
# 忽略目錄examples/packages/public/# 忽略指定文件vue.config.jsbabel.config.js*.map配置npm庫信息
配置package.json文件，以發(fā)布庫文件。
{ "name": "gis", "version": "1.2.5", "description": "基于 vue 的庫文件", "main": "dist/gis.umd.min.js", "keyword": "vue gis", "private": false, "files": ["dist"], "license": "mit" }name: 包名，該名字是唯一的?？稍?npm 官網(wǎng)搜索名字，如果存在則需換個名字。version: 版本號，每次發(fā)布至 npm 需要修改版本號，不能和歷史版本號相同。description: 描述。main: 入口文件，該字段需指向我們最終編譯后的包文件。keyword：關(guān)鍵字，以空格分離希望用戶最終搜索的詞。author：作者files: 要上傳的文件private：是否私有，需要修改為 false 才能發(fā)布到 npmlicense： 開源協(xié)議dependencies： 依賴庫注意每次發(fā)布新的庫，需要更改版本號，規(guī)則如下：
"version": "1.2.5" 主版本號為 1，次版本號 2，修訂號 5
主版本號（major）：當(dāng)你做了不兼容的api修改次版本號（minor）：當(dāng)你做了向下兼容的功能性新增修訂號（patch）：當(dāng)你做了向下兼容的問題修正登錄npm
首先設(shè)置登錄的npm鏡像地址
npm config set registry http://168.20.20.57.4873然后在終端執(zhí)行登錄命令，輸入用戶名、密碼、郵箱即可登錄
npm login接著發(fā)布庫資源到npm
npm publish最后發(fā)布成功可到官網(wǎng)查看對應(yīng)的包并下載
npm install package_name相關(guān)推薦：
2020年前端vue面試題大匯總（附答案）
vue教程推薦：2020最新的5個vue.js視頻教程精選
更多編程相關(guān)知識，請訪問：編程入門！！