Not building single file VUE component?

Question

Vue.js

I'm trying to build the first test application, it doesn't work, tell me where is the error? here is App.vue
test page

<template>
  <Cardboard></Cardboard>
</template>

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

  export default {
    components: {
      Cardboard
    }
  }
</script>

Cardboard

<h2>{{ message }}</h2>
</template>

<script>
  export default {
    name: 'Cardboard',
    data () {
      return {
        message: 'Welcome to Vue.js'
      }
    }
  }
</script>

<style>
  #hello {
    font-family: Verdana;
    color: navy;
  }
</style>

test

<include href="/views/inc/header.htm" /><!-- Шапка сайта -->

<div id="app">
  <Cardboard></Cardboard>
</div>


<include href="/views/inc/footer.htm" /><!-- Подвал сайта -->
<script src="/src/js/bundle.js"></script><!-- VUE.JS -->

webpack

var path = require('path')
const {
  VueLoaderPlugin
} = require('vue-loader'); // плагин для загрузки кода Vue

module.exports = {
  mode: 'development', // 'production'
  entry: './src/js/main.js',
  output: {
    path: path.resolve(__dirname, './src/js'),
    filename: 'bundle.js',
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

main.js

// npm run build

import Vue from 'vue'
import App from './vue/App.vue'

new Vue({
  el: '#app',
  components: {
    App
  }
})

Folder structure