αΫοͱ؆୯ʂ͓खܰ4DBGGPME( & & , 4 8 ) 0 % 3 * / , * / ' 6 , 6 0 , " ' 3 0 / 5 & / % & % * 5 * 0 /
View Slide
‣ ,FJUBSP0LBNVSB‣ ΧϥϏφςΫϊϩδʔגࣜձࣾ‣ ϑϩϯτΤϯυΤϯδχΞ‣ !LBSBBHFLFJUBSPPࣗݾհ
‣ ΞϓϦέʔγϣϯͷܗ‣ ྫ͑ɺ3VCZPO3BJMTʹʮ4DBGGPMEʯͱݺΕΔܗΛࣗಈੜ͢Δػೳ͕͋Δ‣ "OHVMBS$-*ͩͱʮOHHFOFSBUFʯίϚϯυҰൃͰܗΛੜͰ͖Δ4DBGGPMEͱʁ
‣ 7VF$-*ͱ͍͏ϓϩδΣΫτͷܗΛੜ͢Δ։ൃπʔϧ͋Δ‣ (FOFSBUPSͱ͍͏ػೳ͕͋ΓɺطଘςϯϓϨʔτΛͬͯϢʔβʔ͚ʹΧελϚΠζՄೳ‣ IUUQTHJUIVCDPNWVFKTUFNQMBUFT‣ ͭ·ΓɺϓϩδΣΫτݻ༗ͷίʔυੜͰ͖Δ7VFKTͰʁ
‣ ϓϩδΣΫτͷઃܭΛόγοͱܾΊΕͳ͍ɻɻɻ‣ ࠓޙɺॊೈʹมԽ͍ͯ͘͠Մೳੑ͋Γ‣ ͬͱؾܰʹ4DBGGPMEJOH͍ͨ͠ʂ͔͠͠ɻɻɻ$ vue generate ίϚϯυཉ͍͠
ઌि͙Β͍ʮԿ͔ྑ͍ͷ͋Γ·͔͢ʔʁʯ
ઌि͙Β͍ʮ)ZHFO͍͍ͧʙʯ
ѹతײँͬɾɾɾʂ
IUUQXXXIZHFOJP
)ZHFO͕Ͱ͖Δ͜ͱ‣ γϯϓϧ͔ͭߴͳίʔυδΣωϨʔλʔ‣ ରܗࣜͰϑΝΠϧΛ࡞Ͱ͖Δʂ‣ طଘϑΝΠϧʹίʔυΛೖͰ͖Δʂ‣ ࣗ༝ʹ$-*ʹΦϓγϣϯΛͤͯɺςϯϓϨʔτͰͦͷΛల։Ͱ͖Δʂ‣ ΧελϚΠζແݶେʂ
Γ͍ͨ͜ͱ‣ ίϯϙʔωϯτͷ4DBGGPMEΛίϚϯυ͔Βੜ͍ͨ͠ʂ‣ ੜϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͍͢͜͠ͱ‣ ίϯϙʔωϯτϑΝΠϧ WVF͕࡞ΒΕΔ‣ ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ‣ "UPNJD%FTJHOͷཻ͕1BHFTͷ߹ɺϧʔςΟϯά͕Ճ͞ΕΔ
Γ͍ͨ͜ͱ‣ ίϯϙʔωϯτͷ4DBGGPMEΛίϚϯυ͔Βੜ͍ͨ͠ʂ‣ ੜϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͍͢͜͠ͱ‣ ίϯϙʔωϯτϑΝΠϧ WVF͕࡞ΒΕΔ‣ ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ‣ "UPNJD%FTJHOͷཻ͕1BHFTͷ߹ɺϧʔςΟϯά͕Ճ͞ΕΔ)ZHFOͳΒ؆୯ʹͰ͖Δʂ
5FNQMBUF---to: "src/components/<%= category %>/<%= name %>/index.vue"---<br/>import Vue from “vue";<br/>export default Vue.extend({<br/>name: "<%= name %>"<br/>});<br/>‣ ςϯϓϨʔτFKTܗࣜͰهड़ɹྫɿίϯϙʔωϯτϑΝΠϧ
5FNQMBUF---to: "src/components/<%= category %>/<%= name %>/index.vue"---<br/>import Vue from “vue";<br/>export default Vue.extend({<br/>name: "<%= name %>"<br/>});<br/>‣ ςϯϓϨʔτFKTܗࣜͰهड़ɹྫɿίϯϙʔωϯτϑΝΠϧIFBE෦ʢZBNMܗࣜʣCPEZ෦ʢFKTܗࣜʣ
1SPNQU‣ ίϚϯυΛ࣮ߦ͢Δͱɺྫ͑ʮίϯϙʔωϯτ໊Կʁʯͱ͔͕ରతʹग़͖ͯ·͢ɻͦͷରతͳ༰ΛಠࣗʹΧελϚΠζ͢Δ͜ͱ͕Ͱ͖Δ$ hygen new component✔ ίϯϙʔωϯτ໊: · TestButton? ίϯϙʔωϯτཻ: …✔ atoms✔ molecules✔ organisms✔ pages
1SPNQU‣ QSPNQUKTʹྻܗࣜͰJORVJSFSͷϑΥʔϚοτΛॻ͖·͢‣ όϦσʔγϣϯͰϢʔβʔͷޡͬͨೖྗΛ͙͜ͱՄೳmodule.exports = [{type: "input",name: "name",message: "ίϯϙʔωϯτ໊:",validate(value) {if (!value.length) {return "ίϯϙʔωϯτ໊Λೖྗ͍ͯͩ͘͠͞ɻ";}return true;}},
)FMQFST‣ DPOpHϑΝΠϧͷIZHFOKTʹϞδϡʔϧΛಡΈࠐΉͱɺςϯϓϨʔτͰͦͷϞδϡʔϧ͕͑Δmodule.exports = {helpers: {fs: require("fs")}};
)FMQFST‣ ྫ͑ɺ/PEFKTͷGTϞδϡʔϧΛ͑ɺϑΝΠϧૢ࡞͕Մೳ‣ FYQPSUͨ͠ϑΝΠϧΛҰׅͰಡΈ͜Έɺ·ͱΊͯFYQPSU͢ΔΑ͏ͳϑΝΠϧ࡞Ͱ͖Δ// components/atoms/index.tsimport TestButton from “./TestButton/index.vue";import TestIcon from "./TestIcon/index.vue";export { TestButton, TestIcon };
$ ͕࣌ؒ͠༨͍ͬͯͨΒɺdemo ͠·͢
‣ )ZHFO͍͍ͧ‣ पลπʔϧͬͺΓେࣄɻ໘ͳ͜ͱࣗಈԽ͢Δ‣ ίϯϙʔωϯτ໊ͱ͔ελΠϧΨΠυʹԊͬͨίʔυ୲อͰ͖Δ‣ ΧελϚΠζ࣍ୈͰແݶͷՄೳੑ✨ࠓͷ·ͱΊ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ