Vue meet up sapporo Vue + Storybook導入について

Transcript

1. VueͱStorybookಋೖʹ͍ͭͯ v-sapporo meet up #1 2019.04.19 (ۚ) at גࣜձࣾΠϯϑΟχοτϧʔϓ ିձٞࣨ
2. 
   ϓϩϑΟʔϧ
   
   ؔޱ
   ༐थ
   
   גࣜձࣾ)".803,4
   ϑϩϯτΤϯυΤϯδχΞ
   
   ओͳۀ຿ɿ)5.-ɾ$44ɾ+BWB4DSJQUɾ$.4ߏங
    ޷͖ͳ$.4ɿ.PWBCMF
   5ZQF
   ɾ$SBGU
   DNT
   
   4/4
   
   #MPH
   
   5XJUUFSɿ!SFEBNPPO
   
   (JUIVCɿSFEBNPPO
   
   #MPHɿIUUQTSFEBNPPOOFU
   
   ࠷ۙͷझຯ
    %:*Ͱఉ࡞ΔͨΊͷ੔஍͍ͯ͠Δʢ౔೔ʣ # Who Are You?
3. 
   Storybookʹ͍ͭͯ
   
   Vue + Stoybookಋೖखॱ
   
   Addonಋೖखॱ
   
   Demo
   
   ಋೖͷॴײ
   
   ·ͱΊ # ໨࣍
4. https://storybook.js.org/ # Storybookʹ͍ͭͯ 
   Storybook
   ͱ͸ʁ
   3FBDUɾ7VFɾ"OHVMBSͳͲͷ6*ίϯϙʔωϯ τΛ։ൃ͢ΔͨΊͷΦʔϓϯιʔεπʔϧ
   6*Λϒϥ΢βͰදࣔͤͨ͞Γίϯϙʔωϯτ ͷঢ়ଶ֬ೝɾςετ͢Δ͜ͱ͕ՄೳͰ͢ɻ
   ҰछͷελΠϧΨΠυʹ͍ۙπʔϧͰɺ
   ΤϯδχΞؒΑΓ΋σβΠφʔͱ6*ͷೝࣝΛ ֬ೝ͠߹͏πʔϧͰ͢ɻ
5. cd ~/workspace vue create vue-storybook // Manually select features cd vue-storybook/ yarn add -D vue-loader sass-loader node-sass @babel/core babel-loader babel-preset-vue touch vue-config.js # Vue + Stoybookಋೖखॱ ## Vue cliͰ؀ڥߏஙʢ։ൃ؀ڥߏஙࡁΈ͸ෆཁʣ 
   $IFDL
   UIF
   GFBUVSFT
   OFFEFE
   GPS
   ZPVS
   QSPKFDU
   #BCFM
   3PVUFS
   7VFY
   -JOUFS
   
   6TF
   IJTUPSZ
   NPEF
   GPS
   SPVUFS
   3FRVJSFT
   QSPQFS
   TFSWFS
   TFUVQ
   GPS
   JOEFY
   GBMMCBDL
   JO
   QSPEVDUJPO
   :FT
   
   1JDL
   B
   MJOUFS
   
   GPSNBUUFS
   DPOpH
   4UBOEBSE
   
   1JDL
   BEEJUJPOBM
   MJOU
   GFBUVSFT
   -JOU
   PO
   TBWF
   
   8IFSF
   EP
   ZPV
   QSFGFS
   QMBDJOH
   DPOpH
   GPS
   #BCFM
   1PTU$44
   &4-JOU
   FUD
   *O
   EFEJDBUFE
   DPOpH
   pMFT
   
   4BWF
   UIJT
   BT
   B
   QSFTFU
   GPS
   GVUVSF
   QSPKFDUT
   /P 
   ઃఆ಺༰
6. const path = require('path') module.exports = { configureWebpack: { resolve: { alias: { '@': path.join(__dirname, '/src') } } }, css: { loaderOptions: { sass: { data: `@import "./src/assets/scss/style.scss";` } }, sourceMap: true } } # Vue + Stoybookಋೖखॱ ## vue-config.js
7. cd ~/workspace/vue-storybook/ yarn add -D @storybook/vue mkdir {stories,\.storybook} touch {stories/index.js,\.storybook/config.js,\.storybook/ webpack.config.js} ˞storybook cli͸࢖༻ͤͣ # Vue + Stoybookಋೖखॱ ## Install Storybook
8. # Vue + Stoybookಋೖखॱ ## vi package.json "scripts": { "storybook": "start-storybook -p 9000", "build-storybook": "build-storybook -c .storybook -o storybook-build" }
9. # Vue + Stoybookಋೖखॱ ## .storybook/config.js import { configure } from '@storybook/vue'; const loadStories = ()=> { require('../stories/index.js'); } configure(loadStories, module);
10. # Vue + Stoybookಋೖखॱ ## .storybook/webpack.config.js const path = require('path'); module.exports = { module: { rules: [ { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../'), }, ], }, };
11. # Vue + Stoybookಋೖखॱ ## stories/index.js // index.jsʹ௚઀هड़͢Δͱίʔυ͕௕͘ͳΔͨΊUI୯ҐͰ෼ׂ // Story ಡΈࠐΈ import './colorPalette' import './button'
12. https://storybook.js.org/docs/addons/addon-gallery/ # Addonಋೖखॱ 
    Addonͱ͸ʁ
    "EEPO͸4UPSZCPPLͷ֦ுػೳ
    "EEPOΛಋೖ͢Δ͜ͱͰɺ6*ίϯϙʔωϯτ ʹΞΫγϣϯΛՃ͑ͨΓঢ়ଶΛมߋ΍6*͝ͱ ʹ3FBENFΛ౰ͯΔ͜ͱ͕Ͱ͖Δ
    ίΞϝϯςφͱ։ൃऀίϛϡχςΟͰدߘ
13. cd ~/workspace/vue-storybook/ yarn add -D @storybook/addon-knobs @storybook/addon-viewport @storybook/addon-notes touch .storybook/addons.js # Addonಋೖखॱ
14. # Addonಋೖखॱ ## .storybook/addon.js // Πϯετʔϧͨ͠ΞυΦϯΛಡΈࠐΉ import '@storybook/addon-knobs/register' import '@storybook/addon-notes/register' import '@storybook/addon-viewport/register'
15. IUUQCJUMZ7E%--4 # Demo
16.  ωοτʹ͋Δ"EEPOͷઃఆํ๏Ͱ͸ಈ͔ͳ͍৔߹͕͋ΔͨΊɺඞͣެࣜΛࢀর͢Δ͜ͱ
     طଘϓϩδΣΫτͰ͸ɺඞͣ͠΋ಉσΟϨΫτϦʹΠϯετʔϧ͠ͳ͍έʔε΋͋ΔͨΊ ࠶ݱͤ͞ΔͨΊͷύεมߋɾϥΠϒϥϦ͕ඞཁ
     ϓϩδΣΫτͰ࢖༻͍ͯ͠Δ/PEFόʔδϣϯ͕ݹ͍ͱಈ࡞͠ͳ͍έʔε͕͋ΔͨΊόʔ δϣϯʹ߹ΘͤΔ͔/PEFΛΞοϓσʔτ͢Δඞཁ͕͋Δ
     طଘίʔυͷσʔλ͸࠶ݱ͠ਏ͍ͨΊɺ4UPSZCPPL༻ͷελϒ͕ඞཁ
     ೋॏ؅ཧʹͳͬͯ͠·͏͕طଘίϯϙʔωϯτ͔Βݺͼग़͢ΑΓɺ4UPSZCPPL༻ͷίϯϙʔ ωϯτͰදࣔͤͨ͞΄͏͕ελΠϧϞοΫͷௐ੔͕͠΍͍͢
     UFNQMBUFݺͼग़͠෦෼ΛϝιουνΣʔϯͰܨ͛ͯهड़͢ΔͨΊɺίʔυࣗମͷݟ௨͕͠ ྑ͘ͳ͍ͨΊϥοϓ༻ίϯϙʔωϯτΛ࡞Δͱݟ΍͍͢
     ֶशίετ໘͕ߴ͍ʢΞοϓσʔτʹΑΔهड़มߋͳͲʣ # ಋೖͷॴײ
17.  ϓϩδΣΫτ୯ҐΑΓϥΠϒϥϦ୯Ґ͸ಋೖ͠΍͍͢
     ϓϩδΣΫτ୯ҐͰ͸ෳ਺ਓ͕ίϯϙʔωϯτΛ࡞ΔͨΊɺ֤ࣗ4UPSZCPPL ͷཧղ͕ඞཁ
     طଘϓϩδΣΫτͷ৔߹ɺ৽نͰ4UPSZCPPLΛಋೖ͢Δίετ͸ߴ͍
     ֶशίετ͸ߴ͍͕ɺ৽نϓϩδΣΫτͰಉࠝͯ͠ਐΊΔͱ6*ͷᴥᴪΛղফ ͠΍͍͢
     ϓϩδΣΫτίʔυͰ͸ͳ͘ɺ4UPSZCPPL༻ͷίϯϙʔωϯτΛ༻ҙ͢Δ΄ ͏͕ྑ͍
     ֦ுͯ͠ίʔυͷυΩϡϝϯτԽͰ͖Ε͹ΤϯδχΞؒʢσβΠϯͷ৔߹͸ σβΠφʔʣͰ೺Ѳ͠΍͍͢ # ·ͱΊ
18. αϯϓϧίʔυ
    http://bit.ly/2Dj7SqS