bbl-reference

walk-through

  vue init webpack project-name

0. Entry point

main.js

1. Remove Everything and start from scratch:

<template>
  <div>
    <h2> hello world</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {}
  }
}
</script>

<style>
</style>

1. Data binding:

<template>
  <div>
    <h2> hello world</h2>
    <h2> hello {{msg}}</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'sqreen',
    }
  }
}
</script>

<style>
</style>

2. Show components :

<template>
  <h2> hello {{msg}}</h2>
</template>

<script>
export default {
  name: 'greeter',
  props: { msg: String },
  }
}
</script>

3 Let's add some routes : Routes

  import WhatWeWantAtSqreen from '@/components/WhatWeWantAtSqreen'

  ...

  routes: [
    {
      path: '/',
      component: Hello
    },
    {
      path: '/whatwewantatsqreen',
      component: WhatWeWantAtSqreen
    }
  ]

  <router-link to="/">Say hello!</router-link>
  <router-link to="/whatwewantatsqreen">What do we want !</router-link>

4. List rendering

/**
* Created by vouill on 7/17/17.
*/

<template>
  <div>
    <div v-for="(item, i) in wishlist">
      <h2>{{item.name}}</h2>
      <img :src="item.pictureUrl + i"/>
    </div>
  </div>
</template>

<script>
  const wishlist = [
    { name: 'Blacky', pictureUrl: 'http://lorempixel.com/400/200/cats/' },
    { name: 'Caramel', pictureUrl: 'http://lorempixel.com/400/200/cats/' },
    { name: 'Boulette', pictureUrl: 'http://lorempixel.com/400/200/cats/' }
  ]
  export default {
    data () {
      return { wishlist: wishlist }
    }
  }
</script>

5. Let's play with stuff :

transitions:

  <link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">

<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
  <component>
  </transition>

Add css framework

. Install bulma

6. Code spliting:

Routes

const Hello = () => import('../components/Hello')
const WhatWeWantAtSqreen = () => import('../components/WhatWeWantAtSqreen')

Conditional component

  const AnimalLover = () => import('./animal-lover.vue')
  ...

  <AnimalLover :name="msg" animal="dog" v-if="msg === 'romain'" />

<template>
  <div>
    {{name}} loves {{animal}}
  </div>
</template>

<script>
  export default {
    props: {
      name: String,
      animal: String
    }
  }
</script>

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.