您好,登錄后才能下訂單哦!
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> <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是用來(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
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。