本片文章給大家詳細介紹如何將Vue元件庫發佈到npm的方法以及程式碼範例分享，有興趣的朋友參考學習下。
製作了一套自己的元件庫，並發佈到npm上，專案程式碼請見https://github.com/hamger/hg-vcomponents
#有一個npm帳號
安裝了vue-cli
vue init webpack hg-vcomponents cd hg-vcomponents cnpm install
目錄結構
- vue-flag-list
+ build
+ dist // 存放发布到npm的代码
- src
- components // 存放组件源代码 和 README.md
- arrows
arrows.vue
README.md
- round
round.vue
README.md
index.js // 组件导出文件
- examples // 存放组件的 demo
arrows.vue
round.vue
index.vue // 组件 demo 的入口
- router
index.js // 引入 examples 下的组件，并配置路由
App.vue
main.js
...內部程式碼詳見GitHub，如果對你有幫助，給個star吧。
為了讓專案能上傳到npm上，需要設定一些地方。
build/webpack.base.conf.js
entry: {
app: process.env.NODE_ENV === 'production'
? './src/components/index.js' // 生产模式下导入文件
: './src/main.js' // 开发模式下导入文件
},package.json
"private": false, // 因为组件包是公用的，所以 private 为 false "main": "dist/hg-vcomponents.min.js", // 导出文件名，即 import 引入的文件
.gitignore
dist資料夾下文件是要匯出的文件，所以在.gitignore文件中把dist/去掉，這樣上傳程式碼的時候也會更新打包後的文件。
開發與生產
由於配置了webpack.base.conf.js，使得專案的開發與生產獨立開來。
使用npm run dev進入開發環境，就可以看到元件的demo，方便除錯。使用npm run build打包元件庫。
發佈到npm
在你登入了npm的情況下，在根目錄輸入命令列(每次更新程式碼執行同樣動作)
npm version patch npm publish
大功告成！現在你可以在其他地方使用npm install hg-vconponents下載自己寫的元件庫了。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是使用Vue元件庫實作發佈到npm的詳細內容。更多資訊請關注PHP中文網其他相關文章！
