How to development library for Vue 3

How to development library for Vue 3 LINE Corporation Front-End
Dev9 Team / Takuma HANATANI(@potato4d) 2021.05

5BLVNB)"/"5"/* 'SPOU&OE%FW5FBN.BOBHFS Relationship - 2018/02: Join Vue.js JP doc maintainer
- 2018/12: Join LINE Corp. - 2019/12: LINE × Vue.js Core team - 2020/03: Join nuxt-community organization - 2021/05: Start Sponsoring Vue.js as LINE OSS - vue-fixed-header(deprecated) - nuxt-basic-auth-module - @nuxtjs/dayjs - nuxt-client-init-module 4FMG*OUSPEVDUJPO

7VFKT ͷϥΠϒϥϦ։ൃΛऔΓר͘؀ڥʹ͍ͭͯ ৽͘͠ 7VFKT ޲͚ͷϥΠϒϥϦΛ։ൃ͢Δ 7VF Y޲͚ͱ 7VF Y޲͚Λཱ྆͢Δʹ͸ ҠߦΛ΍Ίͨέʔε
1. 2. 3. 4. Contents

7VF Yͱ 7VF Yͷར༻ঢ়گ https://www.npmtrends.com/

7VF Yͱ 7VF Yͷར༻ঢ়گ https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

7VF Yͱ 7VF Yͷར༻ঢ়گ https://github.com/vitejs/vite/tree/main/packages/plugin-vue

7VF TVQQPSUJTPQUJPOBM

WVFEFNJ https://github.com/vueuse/vue-demi

/FXCVOEMFS7JUF https://vitejs.dev

%FWFMPQNFOU5FNQMBUFGPS7VF MJCSBSZ https://github.com/potato4d/vite-template-vue3-library

-FBSOBCPVUCSFBLJOHDIBOHFT

-FBSOBCPVUCSFBLJOHDIBOHFT https://v3.vuejs.org/guide/migration/introduction.html

-FBSOBCPVUCSFBLJOHDIBOHFT https://v3.vuejs.org/guide/migration/fragments.html

-FBSOBCPVUCSFBLJOHDIBOHFT https://v3.vuejs.org/guide/migration/render-function-api.html

-FBSOBCPVUDPOWFSUFS

-FBSOBCPVUDPOUFSUFS https://github.com/vueuse/vue-demi

-FBSOBCPVUDPOUFSUFS TBD

.FDIBOJTNPGWVFEFNJ Vue3 import { reactive } from'v ue-demi' node_modules vue-demi
Vue 3 Vue 2

θϩϕʔεͰ৽͍͠ύοέʔδͱͯ͠ߏ੒͠௚͢ .POPSFQP ͱͯ͠ϩδοΫΛ੾Γग़͢ ύοέʔδͷ੾Γग़͠ํ

θϩϕʔεͰύοέʔδͱͯ͠ߏங͠௚͢ ಛ௃ ɾθϩ͔Βߏங͢Δ͜ͱͰɺ׬શʹผͷίʔυϕʔεͱͯ͠؅ཧ͞ΕΔ ɾϦϦʔελΠϛϯάར༻͍ͯ͠ΔϏϧυπʔϧϥϯλΠϜશ͕ͯ෼͔ΕΔ ڧΈ ɾύοέʔδ໊͸ಉ͡··ɺϝδϟʔόʔδϣϯҧ͍΍ !OFYUͳͲΛ͚ͭ΍͍͢ ɾWVFJOͳͲ͸ !OFYUܗࣜΛ࠾༻͍ͯ͠Δ ɾ'SPOU&OE0QT؍఺Ͱͷྺ࢙΍ෛ࠴Λ࢒ͮ͠Β͍
ऑΈ ɾઐ༻ͷϩδοΫͳͲ͕ް͍৔߹ʹɺଟॏ؅ཧͷίετ͕ॏ͘ͷ͔͔͠Δ ɾڞ༗Ͱ͖ΔΑ͏ͳπʔϧνΣΠϯ͢Β΋ݸผͰ؅ཧ͢Δ͜ͱʹͳΔ ผ SFQPͳͲͰఏڙΛ࢝ΊΔ

.POPSFQP ͱͯ͠ϩδοΫΛ੾Γग़͢ ಛ௃ ɾίΞϩδοΫΛڞ༗ͯ͠ɺґଘπϦʔ͚ͩΛ੾Γ෼͚Δ ɾUFTUMJOUGPSNBUͳͲ͸ IPJTUͰڞ௨Խ͢Δ ڧΈ ɾߦ͍ͬͯΔܭࢉ΍ϩδοΫ͕ϔϏʔͳ৔߹ɺͦͷ؅ཧίετΛ࠷খԽͰ͖Δ ɾ+FTU΍&4-JOU1SFUUJFSͳͲͷߋ৽ίετ͸͔ͳΓ཈͑ΒΕΔ ऑΈ
ɾಉҰύοέʔδ໊Λ࣋ͯͳ͍ͨΊɺWVFGPPCBSͷΑ͏ͳ໊લۭ͕ؒඞཁʹ ɾ໊લۭؒͷσϑΥϧτ͕ 7VFଆʹ͍ͨ͠৔߹ʹίετ͕ߴ͘ͳΔ -FSOB:BSO8PSLTQBDFͳͲͰղܾΛਤΔ

Core For v3 ͋Δࣾ಺ύοέʔδͷྫ import { Directive } from 'vue';
import { hook } from '../core'; const directive: Directive = { mounted: hook, updated: hook, }; export default directive; TBD export function hook() { // ... Main logic }

ͭͷύοέʔδΛ؅ཧ͢Δ৔߹͸ DPEFNPE ΋༗ޮ׆༻Ͱ͖Δ

WVFGJYFEIFBEFS

3FOEFS'VODUJPOͷίʔυʹ͍ͭͯ

Code DOM WVFGJYFEIFBEFS͕ੜΈग़͢ %0.ʹ͍ͭͯ <FixedHeader> <header> <h1> <nav> <ul> …
</ul> </nav> </header> </FixedHeader> <header class="vue-fixed-header" > <h1> <nav> <ul> … </ul> </nav> </header>

</ul> </nav> </header> </FixedHeader> <header class="vue-fixed-header" > <h1> <nav> <ul> … </ul> </nav> </header> 1. Fragment ΁ͷରԠ

</ul> </nav> </header> </FixedHeader> <header class="vue-fixed-header" > <h1> <nav> <ul> … </ul> </nav> </header> 1. Fragment ΁ͷରԠ 2. Render Function

*&αϙʔτͷऴྃ https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

աڈΑΓ΋ະདྷΛ޲͍͍ͯ͜͏ ·ͱΊ • ݱঢ় 7VF Yͱ 7VF YΛಉ࣌ʹαϙʔτ͢Δ৔߹ɺ͍͔ͭ͘ͷબ୒ࢶ͕͋Δ • ύοέʔδଆͰશͯରԠ͢Δ
WVFEFNJ WVFͳͲʹཔΔ ͲͪΒ͔ʹৼΓ੾Δ • ΋͠ 7VF ޲͚ʹύοέʔδΛ࡞Γ͍ͨͷʹɺ 7VF Y͕ؾ͕͔Γ͋Ε͹ɺ๨Εͯ΋ྑ͍ • ϢʔβʔଆͰͦͷࠩҟΛղফ͠ɺར༻͢Δखஈ͕ͳ͍Θ͚Ͱ͸ͳ͍ͨΊɻ • ৽͍͠Ձ஋Λఏڙ͢Δ͜ͱΛ༏ઌ͢Δ͜ͱ͕ɺ݁Ռతʹརӹʹͭͳ͕Δ͜ͱ΋͋Δ • ͲͪΒ΋αϙʔτ͢Δ৔߹͸ɺ͍͔ͭ͘ͷେ͖ͳҧ͍ΛؾΛ͚ͭΔͱྑ͍ • JOIFSJU"UUST ͷڍಈͷҧ͍΍ 3FOEFS'VODUJPOͳͲ͸ɺϥΠϒϥϦͰ΋ΞϓϦέʔγϣϯͰ΋ॏཁ • ઌʹ #SFBLJOH$IBOHFTʹ໨Λ௨ͨ͠ޙɺͲ͜·Ͱཱ྆Ͱ͖Δ͔Λௐ΂Α͏ • ྆ରԠ͕೉͍͠΋ͷ΋͋ΔͨΊɺͦ͜Ͱ͸ແཧ͠ͳ͍ • ੾Γ෼͚ΔߜΔ͜ͱ΋࣌ʹ͸ඞཁ

How to development library for Vue 3

How to development library for Vue 3

More Decks by LINE Developers

Other Decks in Technology

Featured

Transcript