如何將vue項(xiàng)目制作成組件并發(fā)布到npm倉庫中
前言
vue作為當(dāng)前前端主流框架，幫我們簡化封裝的同時(shí)還可以將我們自己的小項(xiàng)目發(fā)布的npm中央倉庫，這是如果有人要使用我們的代碼，我們不必在提供自己的項(xiàng)目源碼，可以直接讓使用者去npm倉庫直接下載我們的項(xiàng)目，下面我們就來去實(shí)現(xiàn)以下自己的項(xiàng)目發(fā)布到npm吧
vue項(xiàng)目初始化
編寫組件
首先在src中新建package目錄
這是我起的組件名 2. 編寫組件
發(fā)布項(xiàng)目
在package根目錄下創(chuàng)建index.js
這里的install方法是在以后我們使用npm i下載我們的組件后在main.js中引用
組件打包 修改package.json文件
--target lib 關(guān)鍵字 指定打包的目錄
--name 打包后的文件名字
--dest 打包后的文件夾的名稱
執(zhí)行命令
npm run package
在命令執(zhí)行完后我們可以在根目錄找到fcsummer-transalte目錄
發(fā)布npm倉庫
切換到新生成的目錄
執(zhí)行命令
初始化項(xiàng)目，還可以執(zhí)行
npm init
執(zhí)行后會逐一讓你輸入要發(fā)布的npm包名字，npm包的描述信息和npm包的作者
在package.json中我們填好描述信息
至此，本地工作基本完成
正式發(fā)布
注冊賬號?npm官網(wǎng)
設(shè)置npm源（可選可不選）
添加npm賬戶
npm adduser
需要填寫你在npm官網(wǎng)注冊的用戶名和密碼，只需要一次本地npm記住后以后就可以不用了 4. 發(fā)布npm
npm publish
如果在這報(bào)錯，基本上原因就是你的npm包已經(jīng)被別人占用了，重新編寫一個就可以
下載引用
下載組件
main.js中引用，這里一定要把css也引用上
3.使用
注意事項(xiàng)
在打包的時(shí)候我們最好--name和--dest相同，不然引用的時(shí)候會有找不到包的情況，如果名字重復(fù)，刪除打包后的文件夾，重新打包
我的項(xiàng)目
[fbk111/fcsummer-translate: 提供中文生成拼音注釋 (github.com)]
引用組件
傳入content和fontSize
頁面展示（我這里是寫死的300px）
項(xiàng)目存在bug，希望前端大佬可以積極參與
已發(fā)布到npm
