vue組件發(fā)布到npm簡單步驟
更新時間：2017年11月30日 15:54:54 投稿：laozhang
給大家講解一下vue組件發(fā)布到npm簡單方法和步驟過程，需要的朋友一起學(xué)習(xí)參考一下。
1.0 新建項目
1.1 初始化項目
輸入npm init，之后需要填什么就寫什么
新建src目錄，并在src目錄下新建alert.vue
$ npm init $ mkdir src $ cd src $ touch alert.vue
最后的目錄結(jié)構(gòu)
1.2 修改入口文件
打開package.json，并修改
1.3 寫組件內(nèi)容
這個組件內(nèi)容可以隨便寫，我們就先測試一下，我是這樣寫的
<template>
<div class="alert">
<div>dddddd</div>
</div>
</template>
<style>
.alert {
color: red;
}
</style>
<script>
export default {
name:'vue-x-alert'
}
</script>
2.0 注冊npm
打開npm官網(wǎng)，注冊，并記住注冊的賬號和密碼,npm-url
2.1 登錄npm，并發(fā)布
$ npm login // 登錄 $ npm publish
2.3 打開npm，看我們剛剛發(fā)布的組件
然后我們要在項目中使用到這個組件，進(jìn)行npm安裝，導(dǎo)入就可以使用了
更新包
修改package.json
"version": "1.1.0",
然后重新發(fā)布一下，就可以了
相關(guān)文章
這篇文章主要介紹了完美解決通過IP地址訪問VUE項目的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function的解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇在vue中阻止瀏覽器后退的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue的虛擬DOM使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
Elementui如何限制el-input框輸入小數(shù)點
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會報錯，下面通過本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案
這篇文章主要介紹了vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
Vue+element自定義指令如何實現(xiàn)表格橫向拖拽
這篇文章主要介紹了Vue+element自定義指令如何實現(xiàn)表格橫向拖拽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue輕松實現(xiàn)水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09