將 Vue 組件庫發布到 npm

制作了一套自己的組件庫，並發布到npm上，項目代碼見 GitHub 。

前期准備

• 有一個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下載自己寫的組件庫了。