將 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下載本身寫的組件庫了。