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

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
   ͳͲ
   ܧଓతͳΞοϓσʔτ
   ि୯ҐͰͷࡉ͔ͳอक

5. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠