setup-vue-2.md

Vue for Nuebs

Part 2: Importing Vue components.

1. Install the relevant preprocessors you want to use.

npm install --save-dev node-sass jade

2. Create a new Vue component file in your src directory called main.vue.

<template lang='jade'>
  div {{ msg }}
</template>

<script>
  export default {
    data () {
      return { msg: 'Hello Vue!' }
    }
  }
</script>

<style lang='scss'>
  div { color: dodgerblue; }
</style>

3. Add an import for main.vue in your index.js file and render it.

import Vue from 'vue'
import main from './main.vue'

new Vue({
  el: '#root',
  render: h => h(main)
})

4. Import your global SCSS files.

<style lang='scss'>
  @import 'variables';
  
  div { color: dodgerblue; }
</style>

5. Import other components.

<script>
  import app from './app.vue'

  export default {
    data () {
      return { msg: 'Hello Vue!' }
    },
    components: { app }
  }
</script>