一個vue組件庫發(fā)布到npm的完整實現(xiàn)過程
新建項目
初始化一個vue項目
src下面創(chuàng)建一個plugins文件夾，index.js文件，這個文件是組件的出口文件。
npm install @/vue-cli -g npm create vue-components cd vue-components npm run serve
創(chuàng)建組件庫
src下新建一個plugins文件夾
然后創(chuàng)建toast組件toast/index.vue
這里為了能夠展示模版，div標簽后面的>去掉了。
<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)建一個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>兩個組件都是很簡單的組件，這里對于組件的內(nèi)容不做詳細解釋，我們要達到這樣的效果，如下面的vue的入口文件main.js。只需要引入plugins，然后Vue.use()一下就可以在全局使用toast組件和button組件。
所以這兩個組件一定是全局注冊的，注冊的過程就在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')如果要實現(xiàn)上面效果，就需要在plugins中創(chuàng)建一個index.js文件，這個文件需要暴露一個對象，對象中有install方法。
import Toast from './toast'
import Button from './button'
const install = (Vue) => {
console.log(Vue, Toast, Button)
}
export default {
install
};在這個方法中，接收到一個參數(shù)是Vue，我們就可以在這個方法中把所有需要的組件注冊好。
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
};這樣就可以在在任何一個組件中使用你寫好的組件了。
來試一下, 把 HelloWorld組件替換為vue-button。
可以看到組件已經(jīng)可以正常展示了。并且可以在任意的地方使用。
如果plugins里面組件比較多，就需要寫很多引入的代碼，然后再一個一個的去注冊，寫起來有是一件無腦化的事情。
這里可以借用require這個api做到自動化引入。
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
};就這么看可能不知道在做什么，來看下下面兩個值，你就能明白上面代碼在做什么了。
requireComponent.keys()剛好是文件的路徑
console.log(requireComponent.keys())
requireComponent(path)的返回值，正好包含了組件的實例信息
console.log(config)
打包部署
接下來對項目打包發(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文件這幾個屬性不可缺少
登陸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)
就可以在項目中使用了。
總結(jié)
到此這篇關(guān)于一個vue組件庫發(fā)布到npm的文章就介紹到這了,更多相關(guān)vue組件庫發(fā)布npm內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue項目環(huán)境變量配置的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個備受喜愛的框架,而 Vite 作為一個新興的構(gòu)建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個 Vue 3 項目,從創(chuàng)建項目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了uni-app 常用API，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識，有這方面興趣的朋友參考下吧。2018-01-01
這篇文章主要介紹了vue如何通過某個字段獲取詳細信息，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
今天小編就為大家分享一篇vue-dplayer 視頻播放器實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在有些情況下我們會有合并表頭、合并列、合并尾部合計的需求,這篇文章主要給大家介紹了關(guān)于前端vue中el-table增加合計行及合并單元格的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了基于vue.js組件實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了vue?route介紹、基本使用、嵌套路由,需要的朋友可以參考下2022-08-08