vue組件發(fā)布到npm簡單步驟
更新時(shí)間：2017年11月30日 15:54:54 投稿：laozhang
給大家講解一下vue組件發(fā)布到npm簡單方法和步驟過程，需要的朋友一起學(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)容可以隨便寫，我們就先測試一下，我是這樣寫的
<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)文章
這篇文章主要介紹了深度剖析Vue3在瀏覽器的運(yùn)行原理，文章通過圍繞主題展開相關(guān)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
一文搞明白vue開發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開發(fā)動(dòng)態(tài)單頁應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2023-06-06
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3中props傳參方式（多種數(shù)據(jù)類型傳參方式）的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說明
這篇文章主要介紹了vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，簡化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫針對(duì)table表格和form表單場景，這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧2022-10-10
這篇文章主要介紹了Vue引入高德地圖實(shí)現(xiàn)流程，實(shí)現(xiàn)步驟是通過vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
VUE中this.$router.push點(diǎn)了后hash地址改變了頁面不跳轉(zhuǎn)
本文主要介紹了VUE中this.$router.push點(diǎn)了后hash地址改變了頁面不跳轉(zhuǎn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析
這篇文章主要為大家介紹了vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06