一個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>兩個組件都是很簡單的組件，這里對于組件的內容不做詳細解釋，我們要達到這樣的效果，如下面的vue的入口文件main.js。只需要引入plugins，然后Vue.use()一下就可以在全局使用toast組件和button組件。
所以這兩個組件一定是全局注冊的，注冊的過程就在Vue.use()調用的過程中。
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。
可以看到組件已經可以正常展示了。并且可以在任意的地方使用。
如果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ā)布。
調整package.json文件 scripts
"lib": "vue-cli-service build --target lib --name vue-toast --dest lib src/plugins/index.js"
npm run lib
生產打包目錄
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)
就可以在項目中使用了。
總結
到此這篇關于一個vue組件庫發(fā)布到npm的文章就介紹到這了,更多相關vue組件庫發(fā)布npm內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-cli3中如何打包成zip壓縮文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇vue-resource:jsonp請求百度搜索的接口示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在vue中實現(xiàn)antd的動態(tài)主題的代碼示例
在需求開發(fā)階段,鑒于項目采用了antd作為基礎組件庫,確保組件外觀與antd一致變得尤為重要,這包括顏色、字體大小及尺寸等樣式的統(tǒng)一,然而,截至當前antd-vue尚未實現(xiàn)這一便捷的CSS變量特性,但理解其背后的實現(xiàn)機制后,我們可以自行構建這一功能,需要的朋友可以參考下2024-07-07
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
vue3+vite+ts使用require.context問題
這篇文章主要介紹了vue3+vite+ts使用require.context問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue配置別名alias在webstorm不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue自定義表單內容檢查rules實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue實現(xiàn)頁面渲染時候執(zhí)行某需求的示例代碼
本文主要介紹了vue實現(xiàn)頁面渲染時候執(zhí)行某需求,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-05-05
這篇文章主要介紹了vue項目打包后部署到服務器,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03