Vue.js Tokyo
v-meetup="#3"
2017.03.16
@saruyama.monki
About me
かわかみ かずよし
Award
Webとクルマのハッカソン 最優秀賞
Community
ng-japan
DEMO
Architecture
Architecture
Vue-CLI
プロジェクトのボイラーテンプレートの作成
Architecture
Vue-CLI
プロジェクトのボイラーテンプレートの作成
$ vue init <template-name> <project-name>
上記のコマンドの<template-name>は、下記から選択できる。
webpack
webpack-simple
browserify
browserify-simple
simple
上記コマンドを実行すると、対話形式で進みプロジェクトが作られる
Architecture
Materialize
CSS Framework
http://materializecss.com/
Architecture
Materialize
CSS Framework
install
$ npm install materialize-css --save-dev
main.js
require('materialize-css');
require('../node_modules/materialize-css/dist/css/materialize.min.css');
Architecture
progressbar.js
https://kimmobrunfeldt.github.io/progressbar.js/
Architecture
progressbar.js
install
$ npm install progressbar.js --save-dev
main.js
const ProgressBar = require('progressbar.js');
Vue.prototype.$progressBar = ProgressBar;
Architecture
vue-touch
touch event control
Architecture
vue-touch
touch event control
install
$ npm install vue-touch@next --save-dev
main.js
const VueTouch = require('vue-touch');
Vue.use(VueTouch, {name: 'v-touch'});
Web Components
Web Components
6 components
Web Components
color
icon
circle button component
<template>
<div class="tempo-control-wrapper">
<_circle_button _class="blue" _icon="remove"></_circle_button>
<_circle_button _class="red" _icon="add"></_circle_button>
</div>
</template>
<script>
export default {
components: {
'_circle_button': require('./CircleButton.vue')
}
}
</script>
Action
Action
+ボタンを押す
bpmの数字が上がる
Action
Top
tempo control
circle button
BPM
$emit
$emit
state : bpm
props
Vuex
Action
Top
tempo control
circle button
BPM
$emit
$emit
state : bpm
props
bpm
bpm
Vuex
Vuex
Server Side
Server Side Framework
laravel >= 5.3
Thank you
@saruyama.monki