VuetifyをLaravel-Mixでコンパイルしたい

VueJS Osaka #3 の発表資料です。

Transcript

1. 7VFUJGZΛ-BSBWFM.JYͰίϯύΠϧ͍ͨ͠ 7VF+4
   0TBLB
   
   
   4"8
2. $(whoami) ࢯ໊
   Ճ౻
   फҰ࿠
   ࡀ
   େࡕࡏॅɾѪ஌ग़਎
   ϋϯυϧωʔϜ
   4"8
   4/4
   ΞΧ΢ϯτ
   5XJUUFS
   !B[VLJ@FBUFS
   (JU)VC
   B[VLJQFOHVJO
   ॴଐ
   גࣜձࣾ
   .4&/
   ೥໨ 7VFKT NBD04 -JOVY 'SFF#4%
3. 7VFUJGZ
   Λ஌͍ͬͯΔํ͸ڍख
4. 7VFUJGZ
   ͱ͸ 7VFKT
   ͷ
   6*
   ίϯϙʔωϯτϑϨʔϜϫʔΫ
   ϚςϦΞϧσβΠϯΛ࠾༻
   ॆ࣮ͨ͠
   6*
   ίϯϙʔωϯτ
   $BMFOEBS
   1BSBMMBY
   4QBSLMJOF
   ͳͲ
   ܧଓతͳΞοϓσʔτ
   ि୯ҐͰͷࡉ͔ͳอक
6. -BSBWFM.JY
   ͱ͸ -BSBWFM
   ޲͚
   8FCQBDL
   ͷϥούʔϥΠϒϥϦ
   -BSBWFM
   1)1
   ϑϨʔϜϫʔΫ
   -BSBWFM
   ͸ඪ४Ͱ
   7VFKT
   Λαϙʔτ
   npm ίϚϯυͰ
   4'$
   ͷίϯύΠϧ͕Մೳ
7. ઃఆํ๏ͷ֓ཁ 7VFUJGZ
   ͷΠϯετʔϧ
   8FCQBDL
   ͷઃఆ
   7VFUJGZ
   ͷઃఆ
   7VFUJGZ
   ͷΠϯϙʔτ
8. 7VFUJGZ
   ͷΠϯετʔϧ Vuetify ͱ
   Vuetify-Loader ΛΠϯετʔϧ
   npm install vuetify vuetify-loader -D ΞΠίϯϑΥϯτ΋࢖͏৔߹͸
   @mdi/font ΋Πϯετʔϧ
   npm install @mdi/font -D
9. 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
10. 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
11. 7VFUJGZ
    ͷΠϯϙʔτ ϧʔτίϯϙʔωϯτʹ
    7VFUJGZ
    ΛಡΈࠐΈ
    7VFUJGZ
    ίϯϙʔωϯτΛ
    import
    ͳ͠Ͱར༻Մೳ import Vuetify from ‘./plugins/vuetify’; const app = new Vue({ Vuetify, el: ‘#app’, }); resources/js/app.js
12. 7VFUJGZ
    ͷར༻
13. 7VFUJGZ
    ίϯϙʔωϯτͷར༻ ίϯϙʔωϯτΛλάͰݺͼग़͠
    import
    จ͸ෆཁ
    σʔλόΠϯσΟϯάͳͲͷॻ͖ํ͸
    7VF
    ͱಉ͡ <template> <v-sheet height=“400” class=“ma-4”> <v-calendar type=“month” :now=“today” :events=“events”> </v-calendar> </v-sheet> </template>
14. ίϯύΠϧͱग़ྗͷ֬ೝ -BSBWFM.JY
    ͰίϯύΠϧ͢Δ࣌ͱಉ͡ίϚϯυ
    npm run dev
    npm run watch
    npm run prod
    ͳͲ
15. σϞ
 εΫϦʔϯ্Ͱ࣮ԋ
16. ·ͱΊ 7VFUJGZ
    ͷಋೖํ๏ͷઆ໌
    7VFUJGZ
    ͷΠϯετʔϧ
    8FCQBDL
    ͷઃఆํ๏
    7VFUJGZ
    ͷઃఆํ๏
    7VFUJGZ
    ͷΠϯϙʔτ
    7VFUJGZ
    ͷར༻ํ๏ͷઆ໌ͱར༻ྫͷ঺հ
17. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠