使用Vue元件庫實作發佈到npm

本片文章給大家詳細介紹如何將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-cli腳手架初始化Vue專案下的專案結構

vue與vue-i18n結合實現後台資料的多語言切換方法

vue.js中$set與陣列更新方法_vue.js

以上是使用Vue元件庫實作發佈到npm的詳細內容。更多資訊請關注PHP中文網其他相關文章！