詳解如何創(chuàng)建并發(fā)布一個 vue 組件
更新時間：2018年11月08日 10:44:04 作者：wangfulin
這篇文章主要介紹了詳解如何創(chuàng)建并發(fā)布一個vue組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
步驟
創(chuàng)建 vue 的腳手架
npm install -g @vue/cli vue init webpack
綁定 git 項目
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue 實現(xiàn)復制內(nèi)容到粘貼板clipboard的方法
下面小編就為大家分享一篇vue 實現(xiàn)復制內(nèi)容到粘貼板clipboard的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
elementUI使用el-upload上傳文件寫法及避坑總結(jié)(上傳圖片/視頻到本地/服務器及回顯+刪除)
upload上傳是前端開發(fā)很常用的一個功能,下面這篇文章主要給大家介紹了關于elementUI使用el-upload上傳文件寫法及避坑的相關資料,包括上傳圖片/視頻到本地/服務器及回顯+刪除,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本篇文章主要介紹了淺談webpack編譯vue項目生成的代碼探索，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒
這篇文章主要介紹了Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue3之聲明式和編程式導航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇vue動態(tài)設置img的src路徑實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3.0運行npm run dev報錯Cannot find module&
本文主要介紹了vue3.0運行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導致,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue全局組件和局部組件的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03