Не собирается однофайловый компонент VUE?

Question

[Tereverda]

Пытаюсь собрать первое тестовое приложение, не работает, подскажите где ошибка?
тут тестовая страница

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
  }
})

Структура папок

Comments

[Alex_mos]

А зачем в файле test вставлять в app это<Cardboard></Cardboard>

Выскакивает какая то ошибка? Что в файле main.js написано?

[Tereverda]

Alex_mos, выше добавил main.js,
html тегом компонент нельзя вызывать внутри div id=app?
Только внутри template корневого компонента?

Структура папок

[Alex_mos]

Tereverda, я конечно с помощью вебпак не пробовал собирать, но мне кажется нужно прописать так

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

или так

new Vue({
  render: h => h(App)
}).$mount('#app')

И получается все что будешь прописывать в файлe App.vue будет рендериться в div id="app".

Конечно могу ошибаться

[Tereverda]

Alex_mos, через что вы собираете компоненты?

[Alex_mos]

Tereverda, вот так

[Miki06]

Alex_mos, извините но вы тоже собираете компоненты через вебпак)

[Alex_mos]

Miki06, ну это да) с помощью vue cli все автоматом делается

[Tereverda]

Alex_mos, извините за глупый вопрос, но на хостинге нет node js возможно ли без команды npm install запустить проект в продакшн?

[Alex_mos]

Tereverda, честно говоря сам задавался таким вопросом раньше. Для всякого рода веб приложении требуется не обычный хостинг, а VPS/VDS хостинг, там уже устанавливаете ноду и все остальное

[Miki06]

Tereverda, node на сервере не нужен на хостинг вы выкладываете папку build/dist как обычный сайт указывая index.html