製作了一套自己的元件庫，併發布到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