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

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

SAW
October 15, 2019

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

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

SAW

October 15, 2019
Tweet

More Decks by SAW

Other Decks in Programming

Transcript

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

    4"8

    View Slide

  2. $(whoami)
    ࢯ໊Ճ౻फҰ࿠ ࡀ

    େࡕࡏॅɾѪ஌ग़਎
    ϋϯυϧωʔϜ4"8
    4/4ΞΧ΢ϯτ
    5XJUUFS!B[[email protected]
    (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