Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Be33a704f251c77162896ac5ba03e9ac?s=47 SAW
October 15, 2019

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

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

Be33a704f251c77162896ac5ba03e9ac?s=128

SAW

October 15, 2019
Tweet

Transcript

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

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

    ೥໨ 7VFKT NBD04 -JOVY 'SFF#4%
  3. 7VFUJGZΛ஌͍ͬͯΔํ͸ڍख

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

  5. None
  6. -BSBWFM.JYͱ͸ -BSBWFM޲͚8FCQBDLͷϥούʔϥΠϒϥϦ -BSBWFM1)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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠