Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VuetifyをLaravel-Mixでコンパイルしたい
Search
SAW
October 15, 2019
Programming
1
760
VuetifyをLaravel-Mixでコンパイルしたい
VueJS Osaka #3 の発表資料です。
SAW
October 15, 2019
Tweet
Share
More Decks by SAW
See All by SAW
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
37
ブラウザでテキストを読み上げる
azuki
0
49
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
34
GraphQL 入門
azuki
1
54
JavaScript で音声認識を試してみよう
azuki
0
41
Voice Recognition in JavaScript
azuki
0
21
Nuxt で GraphQL のクエリを送信する方法
azuki
2
92
関西の IT 勉強会コミュニティをもっと盛り上げたい!!
azuki
0
64
Postman で GraphQL のクエリを送ってみよう
azuki
0
330
Other Decks in Programming
See All in Programming
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
WinActorの勉強を継続する方法
tamai_63
0
130
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
Adding Security to Microcontroller Ruby
sylph01
1
160
The Design of Everyday APIs - PyCon 2024
roguelynn
1
210
freeeのエンジニアが 就活で出そうな コーディングテストを 解説してみる
freee
1
180
AppRouter Panel Talk
yosuke_furukawa
PRO
1
530
HonoのRPCで真の型安全が欲しかった
kosei28
1
160
RaaP
ksss
0
160
How to implement a RubyVM with PHP?
memory1994
PRO
2
880
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
110
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
23k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Robots, Beer and Maslow
schacon
PRO
155
8k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Designing with Data
zakiwarfel
96
4.8k
Designing the Hi-DPI Web
ddemaree
276
33k
Scaling GitHub
holman
457
140k
Visualization
eitanlees
137
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Transcript
7VFUJGZΛ-BSBWFM.JYͰίϯύΠϧ͍ͨ͠ 7VF+40TBLB 4"8
$(whoami) ࢯ໊Ճ౻फҰ ࡀ େࡕࡏॅɾѪग़ ϋϯυϧωʔϜ4"8 4/4ΞΧϯτ 5XJUUFS!B[VLJ@FBUFS (JU)VCB[VLJQFOHVJO ॴଐגࣜձࣾ.4&/
7VFKT NBD04 -JOVY 'SFF#4%
7VFUJGZΛ͍ͬͯΔํڍख
7VFUJGZͱ 7VFKTͷ6*ίϯϙʔωϯτϑϨʔϜϫʔΫ ϚςϦΞϧσβΠϯΛ࠾༻ ॆ࣮ͨ͠6*ίϯϙʔωϯτ $BMFOEBS 1BSBMMBY 4QBSLMJOFͳͲ ܧଓతͳΞοϓσʔτ ि୯ҐͰͷࡉ͔ͳอक
None
-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ͱಉ͡ <template> <v-sheet height=“400” class=“ma-4”> <v-calendar type=“month”
:now=“today” :events=“events”> </v-calendar> </v-sheet> </template>
ίϯύΠϧͱग़ྗͷ֬ೝ -BSBWFM.JYͰίϯύΠϧ͢Δ࣌ͱಉ͡ίϚϯυ npm run dev npm run watch npm run
prodͳͲ
σϞ εΫϦʔϯ্Ͱ࣮ԋ
·ͱΊ 7VFUJGZͷಋೖํ๏ͷઆ໌ 7VFUJGZͷΠϯετʔϧ 8FCQBDLͷઃఆํ๏ 7VFUJGZͷઃఆํ๏ 7VFUJGZͷΠϯϙʔτ 7VFUJGZͷར༻ํ๏ͷઆ໌ͱར༻ྫͷհ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠