Vue組件庫(kù)發(fā)布到npm詳解

更新時(shí)間：2018年02月17日 08:46:12 投稿：laozhang

本片文章給大家詳細(xì)介紹了如何將Vue組件庫(kù)發(fā)布到npm的方法以及代碼示例分享，感興趣的朋友參考學(xué)習(xí)下。

制作了一套自己的組件庫(kù)，并發(fā)布到npm上，項(xiàng)目代碼見(jiàn)https://github.com/hamger/hg-vcomponents

前期準(zhǔn)備

有一個(gè)npm賬號(hào)
安裝了vue-cli

搭建項(xiàng)目

vue init webpack hg-vcomponents
cd hg-vcomponents
cnpm install

目錄結(jié)構(gòu)

- vue-flag-list
  + build
   + dist // 存放發(fā)布到npm的代碼
   - src
     - components // 存放組件源代碼 和 README.md
      - arrows
         arrows.vue
         README.md
       - round
        round.vue
         README.md
      index.js // 組件導(dǎo)出文件
    - examples // 存放組件的 demo
      arrows.vue
       round.vue
       index.vue // 組件 demo 的入口
     - router
       index.js // 引入 examples 下的組件，并配置路由
     App.vue
     main.js
   ...

內(nèi)部代碼詳見(jiàn) GitHub，如果對(duì)你有所幫助，給個(gè)star吧。

項(xiàng)目配置

為了使項(xiàng)目能上傳到npm上，需要配置一些地方。

build/webpack.base.conf.js

entry: {
  app: process.env.NODE_ENV === 'production'
   ? './src/components/index.js' // 生產(chǎn)模式下導(dǎo)入文件
   : './src/main.js' // 開(kāi)發(fā)模式下導(dǎo)入文件
},

package.json

"private": false, // 因?yàn)榻M件包是公用的，所以 private 為 false
"main": "dist/hg-vcomponents.min.js", // 導(dǎo)出文件名，即 import 引入的文件

.gitignore

dist文件夾下文件是要導(dǎo)出的文件，所以在.gitignore文件中把dist/去掉，這樣上傳代碼的時(shí)候也會(huì)更新打包后的文件。

開(kāi)發(fā)與生產(chǎn)

由于配置了webpack.base.conf.js，使得項(xiàng)目的開(kāi)發(fā)與生產(chǎn)獨(dú)立開(kāi)來(lái)。

使用npm run dev進(jìn)入開(kāi)發(fā)環(huán)境，就可以看到組件的demo，方便調(diào)試。使用npm run build打包組件庫(kù)。

發(fā)布到npm

在你登錄了npm的情況下，在根目錄輸入命令行(每次更新代碼執(zhí)行同樣操作)

npm version patch
npm publish

大功告成！現(xiàn)在你可以在其他地方使用npm install hg-vconponents下載自己寫的組件庫(kù)了。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Vue 根據(jù)條件判斷van-tab的顯示方式
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
深入淺析Vue中mixin和extend的區(qū)別和使用場(chǎng)景
Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend，接下來(lái)給大家介紹Vue中mixin和extend的區(qū)別和使用場(chǎng)景，感興趣的朋友一起看看吧
2019-08-08
如何使用HBuilderX把vue項(xiàng)目打包成apk
這篇文章主要介紹了如何使用HBuilderX把vue項(xiàng)目打包成apk，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue二級(jí)路由設(shè)置方法
下面小編就為大家分享一篇vue二級(jí)路由設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue3封裝簡(jiǎn)易的vue-echarts問(wèn)題
這篇文章主要介紹了vue3封裝簡(jiǎn)易的vue-echarts問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue切換div顯示隱藏,多選，單選代碼解析
這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07