詳解如何創(chuàng)建并發(fā)布一個(gè) vue 組件
更新時(shí)間：2018年11月08日 10:44:04 作者：wangfulin
這篇文章主要介紹了詳解如何創(chuàng)建并發(fā)布一個(gè)vue組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
步驟
創(chuàng)建 vue 的腳手架
npm install -g @vue/cli vue init webpack
綁定 git 項(xiàng)目
cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master
寫組件
創(chuàng)建組件 src/components/xxx.vue
例如：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
發(fā)布
npm publish
展示
代碼參考
vue-component-popup
參考文檔
Packaging Vue Components for npm
Vue CLI 3
vue-sfc-rollup
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法
下面小編就為大家分享一篇vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
elementUI使用el-upload上傳文件寫法及避坑總結(jié)(上傳圖片/視頻到本地/服務(wù)器及回顯+刪除)
upload上傳是前端開發(fā)很常用的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于elementUI使用el-upload上傳文件寫法及避坑的相關(guān)資料,包括上傳圖片/視頻到本地/服務(wù)器及回顯+刪除,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
淺談webpack編譯vue項(xiàng)目生成的代碼探索
本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Vue3+vantUI3時(shí)間組件封裝過程支持選擇年以及年月日時(shí)分秒
這篇文章主要介紹了Vue3+vantUI3時(shí)間組件封裝過程支持選擇年以及年月日時(shí)分秒,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
今天小編就為大家分享一篇vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module&
本文主要介紹了vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module node:url,因?yàn)槭褂玫膎ode版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue全局組件和局部組件的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03