Vue組件庫(kù)發(fā)布到npm詳解
制作了一套自己的組件庫(kù)，并發(fā)布到npm上，項(xiàng)目代碼見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)部代碼詳見 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' // 開發(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ì)更新打包后的文件。
開發(fā)與生產(chǎn)
由于配置了webpack.base.conf.js，使得項(xiàng)目的開發(fā)與生產(chǎn)獨(dú)立開來。
使用npm run dev進(jìn)入開發(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)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
深入淺析Vue中mixin和extend的區(qū)別和使用場(chǎng)景
Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend，接下來給大家介紹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è)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue3封裝簡(jiǎn)易的vue-echarts問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過示例代碼介紹的非常詳細(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