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