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

Be33a704f251c77162896ac5ba03e9ac?s=47 SAW
October 15, 2019
Programming
1
210

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

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

Be33a704f251c77162896ac5ba03e9ac?s=128

SAW

October 15, 2019
Tweet

Want more?

Be33a704f251c77162896ac5ba03e9ac?s=48 azuki
2
280
Be33a704f251c77162896ac5ba03e9ac?s=48 azuki
2
820
Be33a704f251c77162896ac5ba03e9ac?s=48 azuki
0
330
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
6
320
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
180
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
120
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
230
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
180
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
260
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
500
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
140
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
230

Transcript

  1. 1.

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

  2. 2.

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

    ೥໨ 7VFKT NBD04 -JOVY 'SFF#4%
  3. 3.

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

  4. 4.

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

  5. 5.
    None
  6. 6.

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

  7. 7.

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

  8. 8.

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

    ΋Πϯετʔϧ npm install @mdi/font -D
  9. 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. 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. 11.

    7VFUJGZͷΠϯϙʔτ ϧʔτίϯϙʔωϯτʹ7VFUJGZΛಡΈࠐΈ 7VFUJGZίϯϙʔωϯτΛimportͳ͠Ͱར༻Մೳ import Vuetify from ‘./plugins/vuetify’; const app =

    new Vue({ Vuetify, el: ‘#app’, }); resources/js/app.js
  12. 12.

    7VFUJGZͷར༻

  13. 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. 14.

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

    prodͳͲ
  15. 15.

    σϞ
 εΫϦʔϯ্Ͱ࣮ԋ

  16. 16.

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

  17. 17.

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