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