Slide 1

Slide 1 text

7VFUJGZΛ-BSBWFM.JYͰίϯύΠϧ͍ͨ͠ 7VF+40TBLB 4"8

Slide 2

Slide 2 text

$(whoami) ࢯ໊Ճ౻फҰ࿠ ࡀ େࡕࡏॅɾѪ஌ग़਎ ϋϯυϧωʔϜ4"8 4/4ΞΧ΢ϯτ 5XJUUFS!B[VLJ@FBUFS (JU)VCB[VLJQFOHVJO ॴଐגࣜձࣾ.4&/ ೥໨ 7VFKT NBD04 -JOVY 'SFF#4%

Slide 3

Slide 3 text

7VFUJGZΛ஌͍ͬͯΔํ͸ڍख

Slide 4

Slide 4 text

7VFUJGZͱ͸ 7VFKTͷ6*ίϯϙʔωϯτϑϨʔϜϫʔΫ ϚςϦΞϧσβΠϯΛ࠾༻ ॆ࣮ͨ͠6*ίϯϙʔωϯτ $BMFOEBS 1BSBMMBY 4QBSLMJOFͳͲ ܧଓతͳΞοϓσʔτ ि୯ҐͰͷࡉ͔ͳอक

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

-BSBWFM.JYͱ͸ -BSBWFM޲͚8FCQBDLͷϥούʔϥΠϒϥϦ -BSBWFM1)1ϑϨʔϜϫʔΫ -BSBWFM͸ඪ४Ͱ7VFKTΛαϙʔτ npm ίϚϯυͰ4'$ͷίϯύΠϧ͕Մೳ

Slide 7

Slide 7 text

ઃఆํ๏ͷ֓ཁ 7VFUJGZͷΠϯετʔϧ 8FCQBDLͷઃఆ 7VFUJGZͷઃఆ 7VFUJGZͷΠϯϙʔτ

Slide 8

Slide 8 text

7VFUJGZͷΠϯετʔϧ Vuetify ͱVuetify-Loader ΛΠϯετʔϧ npm install vuetify vuetify-loader -D ΞΠίϯϑΥϯτ΋࢖͏৔߹͸@mdi/font ΋Πϯετʔϧ npm install @mdi/font -D

Slide 9

Slide 9 text

8FCQBDLͷઃఆ vuetify-loader/lib/plugin ΛಡΈࠐΈ 8FCQBDLͷplugins ʹvuetify-loader ͷΠϯελϯεΛ௥Ճ const mix = require(‘laravel-mix’); const vuetifyLoader = require(‘vuetify-loader/lib/plugin’); mix.webpackConfig({[ plugins: [ new VuetifyLoader() ], }); webpack.mix.js

Slide 10

Slide 10 text

7VFUJGZͷઃఆ 7VFͷϓϥάΠϯͱͯ͠7VFUJGZΛಡΈࠐΈ ΞΠίϯϑΥϯτͷઃఆ import ‘@mdi/font/css/materialdesignicons.css’; import Vue from ‘vue’; import Vuetify from ‘vuetify/lib’; Vue.use(Vuetify); export default new Vuetify({ icons: { iconfont: ‘mdi’ } }); resources/js/plugins/vuetify.js

Slide 11

Slide 11 text

7VFUJGZͷΠϯϙʔτ ϧʔτίϯϙʔωϯτʹ7VFUJGZΛಡΈࠐΈ 7VFUJGZίϯϙʔωϯτΛimportͳ͠Ͱར༻Մೳ import Vuetify from ‘./plugins/vuetify’; const app = new Vue({ Vuetify, el: ‘#app’, }); resources/js/app.js

Slide 12

Slide 12 text

7VFUJGZͷར༻

Slide 13

Slide 13 text

7VFUJGZίϯϙʔωϯτͷར༻ ίϯϙʔωϯτΛλάͰݺͼग़͠ importจ͸ෆཁ σʔλόΠϯσΟϯάͳͲͷॻ͖ํ͸7VFͱಉ͡

Slide 14

Slide 14 text

ίϯύΠϧͱग़ྗͷ֬ೝ -BSBWFM.JYͰίϯύΠϧ͢Δ࣌ͱಉ͡ίϚϯυ npm run dev npm run watch npm run prodͳͲ

Slide 15

Slide 15 text

σϞ
 εΫϦʔϯ্Ͱ࣮ԋ

Slide 16

Slide 16 text

·ͱΊ 7VFUJGZͷಋೖํ๏ͷઆ໌ 7VFUJGZͷΠϯετʔϧ 8FCQBDLͷઃఆํ๏ 7VFUJGZͷઃఆํ๏ 7VFUJGZͷΠϯϙʔτ 7VFUJGZͷར༻ํ๏ͷઆ໌ͱར༻ྫͷ঺հ

Slide 17

Slide 17 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠