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