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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
    

    View Slide

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

    View Slide

12. 7VFUJGZͷར༻
    

    View Slide

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

    View Slide

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

    View Slide

15. σϞ

    εΫϦʔϯ্Ͱ࣮ԋ
    
    

    View Slide

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

    View Slide

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

    View Slide