溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
generator-vue-component可以快速生成自己的組件開發的腳手架，類似于vue-cli生成vue項目，這腳手架是目錄結構是方便組件開發和調試
由于腳手架是由yeoman搭建，所以必須全局安裝yeoman
npm install yo
然后全局安裝generator-vue-component
npm install generator-vue-component -g
到項目目錄，獲取對應的開發模板
yo vue-component-developer
運行上面命令會彈出下面，依次輸入對應的信息，到Your component type這一步可以選擇對應的組件類型，有組件和指令兩種模板，選擇完成后輸入對應的組件名稱或者指令名稱即可，例如我們聲明的組件名為vue-table
在vueTable目錄下安裝對應的模塊，后運行下面命令即可
npm i && npm run dev
目錄結構
index.js
此文件是vue組件聲明并導出
import VueTable from './src/components/VueTable.vue';
VueTable.install = function (Vue) {
Vue.component(VueTable.name, VueTable)
};
export default VueTable;
components/VueTable.vue
開發的組件文件
<style lang="scss" scoped>
</style>
<template>
<div>
<h2>{{ title }}</h2>
<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，一個用來開發，一個用來測試，其他不需要管
開發完怎么辦？
開發完成可以有兩個選擇
本地安裝 npm install 項目的本地路徑
發布到npm，遠程安裝 npm install vue-table
如何使用？
import VueTable from 'vue-table' Vue.use(VueTable);
github地址
最后附上github地址，給個star吧！https://github.com/KELEN/generator-vue-component-developer
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
