一個(gè)vue組件庫(kù)發(fā)布到npm的完整實(shí)現(xiàn)過程
新建項(xiàng)目
初始化一個(gè)vue項(xiàng)目
src下面創(chuàng)建一個(gè)plugins文件夾，index.js文件，這個(gè)文件是組件的出口文件。
npm install @/vue-cli -g npm create vue-components cd vue-components npm run serve
創(chuàng)建組件庫(kù)
src下新建一個(gè)plugins文件夾
然后創(chuàng)建toast組件toast/index.vue
這里為了能夠展示模版，div標(biāo)簽后面的>去掉了。
<template>
<div class="hello"
<div class="toast" :class="{active: toastStatus}"
<div class="toast-wrapper"{{text}}</div
</div
</div
</template>
<script>
export default {
name: 'vue-toast',
data() {
return {
toastStatus: false,
text:''
}
},
methods: {
handlerToast(toastInfo,time) {
this.text = toastInfo;
this.toastStatus = true;
time = time || 2000
setTimeout(() => {
this.toastStatus = false;
}, time)
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.toast {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, 50%);
min-width: 0px;
min-height: 0;
table-layout: center;
background: rgba(0,0,0,0.5);
display: none
}
.active {
display: block
}
</style>再創(chuàng)建一個(gè)button組件button/index.vue
<template>
<div class="hello"
<button這里是button組件</button
</div
</template>
<script>
export default {
name: 'vue-button',
props: {
msg: String
},
data() {
return {
}
},
methods: {
},
}
</script>兩個(gè)組件都是很簡(jiǎn)單的組件，這里對(duì)于組件的內(nèi)容不做詳細(xì)解釋，我們要達(dá)到這樣的效果，如下面的vue的入口文件main.js。只需要引入plugins，然后Vue.use()一下就可以在全局使用toast組件和button組件。
所以這兩個(gè)組件一定是全局注冊(cè)的，注冊(cè)的過程就在Vue.use()調(diào)用的過程中。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import plugins from './plugins'
Vue.config.productionTip = false
Vue.mixin({
mounted() {
console.log('組件加載完成')
}
})
Vue.use(plugins)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')如果要實(shí)現(xiàn)上面效果，就需要在plugins中創(chuàng)建一個(gè)index.js文件，這個(gè)文件需要暴露一個(gè)對(duì)象，對(duì)象中有install方法。
import Toast from './toast'
import Button from './button'
const install = (Vue) => {
console.log(Vue, Toast, Button)
}
export default {
install
};在這個(gè)方法中，接收到一個(gè)參數(shù)是Vue，我們就可以在這個(gè)方法中把所有需要的組件注冊(cè)好。
import Toast from './toast'
import Button from './button'
const install = (Vue) => {
console.log(Vue, Toast, Button);
Vue.component(Toast.name, Toast);
Vue.component(Button.name, Toast);
}
export default {
install
};這樣就可以在在任何一個(gè)組件中使用你寫好的組件了。
來試一下, 把 HelloWorld組件替換為vue-button。
可以看到組件已經(jīng)可以正常展示了。并且可以在任意的地方使用。
如果plugins里面組件比較多，就需要寫很多引入的代碼，然后再一個(gè)一個(gè)的去注冊(cè)，寫起來有是一件無(wú)腦化的事情。
這里可以借用require這個(gè)api做到自動(dòng)化引入。
plugins/index.js
const requireComponent = require.context('./', true, /\.vue$/);
console.log(requireComponent.keys())
const install = (Vue) => {
if(install.installed) return;
install.installed = true;
requireComponent.keys().map(path => {
const config = requireComponent(path);
console.log(config)
const componnetName = config.default.name;
Vue.component(componnetName, config.default || config)
})
}
export default {
install
};就這么看可能不知道在做什么，來看下下面兩個(gè)值，你就能明白上面代碼在做什么了。
requireComponent.keys()剛好是文件的路徑
console.log(requireComponent.keys())
requireComponent(path)的返回值，正好包含了組件的實(shí)例信息
console.log(config)
打包部署
接下來對(duì)項(xiàng)目打包發(fā)布。
調(diào)整package.json文件 scripts
"lib": "vue-cli-service build --target lib --name vue-toast --dest lib src/plugins/index.js"
npm run lib
生產(chǎn)打包目錄
package.json文件這幾個(gè)屬性不可缺少
登陸npm
npm publish發(fā)布
使用
npm i vue-toast-maile
import plugins from 'vue-toast-maile' import "../node_modules/vue-toast-maile/lib/vue-toast.css" Vue.use(plugins)
就可以在項(xiàng)目中使用了。
總結(jié)
到此這篇關(guān)于一個(gè)vue組件庫(kù)發(fā)布到npm的文章就介紹到這了,更多相關(guān)vue組件庫(kù)發(fā)布npm內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-cli3中如何打包成zip壓縮文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-resource:jsonp請(qǐng)求百度搜索的接口示例
今天小編就為大家分享一篇vue-resource:jsonp請(qǐng)求百度搜索的接口示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在vue中實(shí)現(xiàn)antd的動(dòng)態(tài)主題的代碼示例
在需求開發(fā)階段,鑒于項(xiàng)目采用了antd作為基礎(chǔ)組件庫(kù),確保組件外觀與antd一致變得尤為重要,這包括顏色、字體大小及尺寸等樣式的統(tǒng)一,然而,截至當(dāng)前antd-vue尚未實(shí)現(xiàn)這一便捷的CSS變量特性,但理解其背后的實(shí)現(xiàn)機(jī)制后,我們可以自行構(gòu)建這一功能,需要的朋友可以參考下2024-07-07
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue3+vite+ts使用require.context問題
這篇文章主要介紹了vue3+vite+ts使用require.context問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue配置別名alias在webstorm不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue自定義表單內(nèi)容檢查rules實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue實(shí)現(xiàn)頁(yè)面渲染時(shí)候執(zhí)行某需求的示例代碼
本文主要介紹了vue實(shí)現(xiàn)頁(yè)面渲染時(shí)候執(zhí)行某需求,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
vue項(xiàng)目打包后部署到服務(wù)器的詳細(xì)步驟
這篇文章主要介紹了vue項(xiàng)目打包后部署到服務(wù)器,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03