In Vue CLI environments powered by Webpack, a .vue file represents a standalone component. The build process, specifically through vue-loader, compiles the HTML template, JavaScript logic, and CSS styles into a single cohesive unit.

Historically, defining components required using Vue.component with inline template strings:

Vue.component('nav-bar', {
    template: '<div>Navigation component</div>'
})

Templates were sometimes extracted into script tags to improve readability:

<script type="text/x-template" id="nav-tpl">
  <div class="navigation">
    <h1>{{ brandName }}</h1>
  </div>
</script>

Vue.component('nav-bar', {
    template: '#nav-tpl',
    data: {
        brandName: 'My App Header'
    }
})

Managing templates and logic across separate HTML blocks becomes difficult to maintain, especially with deeply nested component hierarchies. Single File Components (SFCs) resolve this by encapsulating the structure, behavior, and presentation within one file:

<template>
  <div class="navigation">
    <h1>{{ brandName }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        brandName: 'My App Header'
      }
    }
  }
</script>

<style>
  .navigation {
    background-color: #333;
    color: #fff;
  }
</style>

The <template> block holds the HTML structure, <script> contains the component logic, and <style> manages the scoped CSS. The vue-loader Webpack plugin processes these three sections to form a fully functional Vue component.

The export default syntax is part of the ES6 Module system. Through babel-loader, Webpack transpiles this syntax so browsers can understand the module imports and exports. The export default statement exposes a module (where one file equals one module), while import Item from './path' retrieves it.

When examining the project directory, the entry point main.js imports the root component:

import App from './App.vue'

Therefore, App.vue must export its component definition. Inside the script section, the data property must be a function returning an object to ensure component state isolation:

export default {
    name: 'App',
    data() {
      return {
        // Must return an object to maintain reactive state
      }
    }
  }

In the template section, valid HTML with closed tags is required:

<div id="root-container">
      <h3>{{ greeting }}</h3>
</div>

To see changes reflected, ensure the development server is running:

npm run serve

Standard Vue features can be implemented directly within App.vue. This includes directives like v-if, v-show, v-for, v-bind, v-model, v-on, and v-html. Instance options such as computed properties for reactive dependencies and methods for event handling are also fully supported:

<template>
  <div id="root-container">
      <h3>{{ greeting }}</h3>
      <p>{{ userAlias }}</p>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        greeting: "Welcome to Vue",
        userAlias: "Admin"
      }
    },
    methods: {
      // Event handlers
    },
    computed: {
      // Computed properties
    }
  }
</script>

<style>
  #root-container {
    font-family: sans-serif;
  }
</style>