Пытаюсь собрать первое тестовое приложение, не работает, подскажите где ошибка?
тут тестовая страница
App.vue
<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
}
})
Структура папок
