T
T
Tereverda2021-11-22 17:50:19
Vue.js
Tereverda, 2021-11-22 17:50:19

Not building single file VUE component?

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
619bb0ac38f01632416437.jpeg

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question