制作了一套自己的組件庫，並發布到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

原文地址：https://segmentfault.com/a/1190000013297807

將 Vue 組件庫發布到 npm