基于 SpringCloud 微服务架构下 广告系统设计与实现

需要学习资源，请点击开挂教学楼

需要学习资源，请点击开挂教学楼

I am trying to put together the absolute bare minimum example of a Vue project that uses webpack to transpile .vue files.

My goal is to understand each build step in detail. Most tutorials advise to use vue-cli and use the webpack-simple config. And although that setup works, it seems overkill for my simple purpose. For now I don't want babel, linting or a live web server with hot module reloading.

A minimal example with just import Vue from 'vue' works! Webpack compiles the vue library and my own code into one bundle.

But now, I want to add vue-loader to the webpack config, so that .vue files will get transpiled. I have installed vue loader:

npm install vue-loader
npm install css-loader
npm install vue-template-compiler 

And I have added vue-loader to the webpack config:

var path = require('path')

module.exports = {
  entry: './dev/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

I have created hello.vue

<template>
  <p>{{greeting}} World</p>
</template>

<script>
export default {
    data:function(){
        return {
            greeting:"Hi there"
        }
    }
}
</script>

And in my app I import 'hello'

import Vue from 'vue'
import hello from "./hello.vue";

    new Vue({
      el: '#app',
      template:`<div><hello></hello></div>`,
      created: function () {   
        console.log("Hey, a vue app!")
      }
    })

The loader does not seem to pick up the .vue files, I get the error:

Module not found: Error: Can't resolve './hello.js' 

EDIT

When trying to import hello from 'hello.vue' I get the error:

Unknown custom element: <hello> - did you register the component correctly?

Am I missing a step? Am I importing the .vue component the right way? How do I use the hello.vue component from app.js?