VueJS Osaka #3 の発表資料です。
7VFUJGZΛ-BSBWFM.JYͰίϯύΠϧ͍ͨ͠7VF+40TBLB4"8
View Slide
$(whoami)ࢯ໊Ճ౻फҰ ࡀେࡕࡏॅɾѪग़ϋϯυϧωʔϜ4"84/4ΞΧϯτ5XJUUFS!B[[email protected](JU)VCB[VLJQFOHVJOॴଐגࣜձࣾ.4&/ 7VFKTNBD04-JOVY'SFF#4%
7VFUJGZΛ͍ͬͯΔํڍख
7VFUJGZͱ7VFKTͷ6*ίϯϙʔωϯτϑϨʔϜϫʔΫϚςϦΞϧσβΠϯΛ࠾༻ॆ࣮ͨ͠6*ίϯϙʔωϯτ$BMFOEBS 1BSBMMBY 4QBSLMJOFͳͲܧଓతͳΞοϓσʔτि୯ҐͰͷࡉ͔ͳอक
-BSBWFM.JYͱ-BSBWFM͚8FCQBDLͷϥούʔϥΠϒϥϦ-BSBWFM1)1ϑϨʔϜϫʔΫ-BSBWFMඪ४Ͱ7VFKTΛαϙʔτnpm ίϚϯυͰ4'$ͷίϯύΠϧ͕Մೳ
ઃఆํ๏ͷ֓ཁ7VFUJGZͷΠϯετʔϧ8FCQBDLͷઃఆ7VFUJGZͷઃఆ7VFUJGZͷΠϯϙʔτ
7VFUJGZͷΠϯετʔϧVuetify ͱVuetify-Loader ΛΠϯετʔϧnpm install vuetify vuetify-loader -DΞΠίϯϑΥϯτ͏߹@mdi/font Πϯετʔϧnpm install @mdi/font -D
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
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
7VFUJGZͷΠϯϙʔτϧʔτίϯϙʔωϯτʹ7VFUJGZΛಡΈࠐΈ7VFUJGZίϯϙʔωϯτΛimportͳ͠Ͱར༻Մೳimport Vuetify from ‘./plugins/vuetify’;const app = new Vue({Vuetify,el: ‘#app’,});resources/js/app.js
7VFUJGZͷར༻
7VFUJGZίϯϙʔωϯτͷར༻ίϯϙʔωϯτΛλάͰݺͼग़͠importจෆཁσʔλόΠϯσΟϯάͳͲͷॻ͖ํ7VFͱಉ͡
ίϯύΠϧͱग़ྗͷ֬ೝ-BSBWFM.JYͰίϯύΠϧ͢Δ࣌ͱಉ͡ίϚϯυnpm run dev npm run watch npm run prodͳͲ
σϞ εΫϦʔϯ্Ͱ࣮ԋ
·ͱΊ7VFUJGZͷಋೖํ๏ͷઆ໌7VFUJGZͷΠϯετʔϧ8FCQBDLͷઃఆํ๏7VFUJGZͷઃఆํ๏7VFUJGZͷΠϯϙʔτ7VFUJGZͷར༻ํ๏ͷઆ໌ͱར༻ྫͷհ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠