詳解vue組件開發(fā)腳手架
generator-vue-component可以快速生成自己的組件開發(fā)的腳手架，類似于vue-cli生成vue項目，這腳手架是目錄結(jié)構(gòu)是方便組件開發(fā)和調(diào)試
由于腳手架是由yeoman搭建，所以必須全局安裝yeoman
npm install yo
然后全局安裝generator-vue-component
npm install generator-vue-component -g
到項目目錄，獲取對應(yīng)的開發(fā)模板
yo vue-component-developer
運(yùn)行上面命令會彈出下面，依次輸入對應(yīng)的信息，到Y(jié)our component type這一步可以選擇對應(yīng)的組件類型，有組件和指令兩種模板，選擇完成后輸入對應(yīng)的組件名稱或者指令名稱即可，例如我們聲明的組件名為vue-table
在vueTable目錄下安裝對應(yīng)的模塊，后運(yùn)行下面命令即可
npm i && npm run dev
目錄結(jié)構(gòu)
index.js
此文件是vue組件聲明并導(dǎo)出
import VueTable from './src/components/VueTable.vue';
VueTable.install = function (Vue) {
Vue.component(VueTable.name, VueTable)
};
export default VueTable;
components/VueTable.vue
開發(fā)的組件文件
<style lang="scss" scoped>
</style>
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">click</button>
</div>
</template>
<script>
export default {
name: "vue-table",
data() {
return {
title: "vue-table"
};
},
methods: {
handleClick: function () {
alert("vue-table");
}
},
mounted() {
}
};
</script>
App.vue
App.vue是用來測試組件的使用
<template>
<div id="app">
<vue-table></vue-table>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {}
}
}
</script>
<style lang="scss">
</style>
主要用來編寫代碼的文件有components/VueTable.vue和demo/App.vue，一個用來開發(fā)，一個用來測試，其他不需要管
開發(fā)完怎么辦？
開發(fā)完成可以有兩個選擇
本地安裝 npm install 項目的本地路徑
發(fā)布到npm，遠(yuǎn)程安裝 npm install vue-table
如何使用？
import VueTable from 'vue-table' Vue.use(VueTable);
github地址
最后附上github地址，給個star吧！https://github.com/KELEN/generator-vue-component-developer
相關(guān)文章
vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能示例
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能,結(jié)合實例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了Vue.js事件處理器與表單控件綁定詳解的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計算屬性用來監(jiān)聽多個數(shù)據(jù)；watch?監(jiān)聽單個數(shù)據(jù)；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內(nèi)容，希望對你有所幫助2021-12-12
vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue+ElementUi+iframe實現(xiàn)輪播不同的網(wǎng)站
需要實現(xiàn)一個輪播圖,輪播內(nèi)容是不同的網(wǎng)站,并實現(xiàn)鼠標(biāo)滑動時停止輪播,當(dāng)鼠標(biāo)10秒內(nèi)不動時繼續(xù)輪播,所以本文給大家介紹了用vue+ElementUi+iframe實現(xiàn)輪播不同的網(wǎng)站,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)抖音時間轉(zhuǎn)盤，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue如何導(dǎo)出頁面為word格式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
VUE的history模式下除了index外其他路由404報錯解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報錯解決辦法，對此有需要的朋友們可以學(xué)習(xí)下。2019-08-08
我們?nèi)粘ｍ椖块_發(fā)中,少不了組件之間的通信,我們可能只知道一些常見的方式比如props,emits,其實,實現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見的通信方式,需要的朋友可以參考下2023-08-08