如何在没有vue cli的情况下使用vue loader

Question

我正在尝试将使用webpack转译. vue文件的Vue项目的绝对最低示例放在一起。

我的目标是详细了解每个构建步骤。大多数教程建议使用vue cli并使用webpack simpleconfig。尽管这种设置很有效，但对于我的简单目的来说，似乎有些过头了。目前，我不想要babel、linting或带有热模块重新加载的实时web服务器。

一个简单的例子，只需从“Vue”导入Vue就可以了！Webpack将vue库和我自己的代码编译成一个包。

但现在，我想将vue loader添加到webpack配置中，以便。vue文件将被传输。我已安装vue loader：

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

并且我已将vue-loader添加到webpack配置：

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'
    }
  }
};

我创造了你好。vue

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

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

在我的应用程序中，我导入了“你好”

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

加载程序似乎没有拾取. vue文件，我得到错误：

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

编辑

当尝试从'hello.vue'导入你好时，我得到错误：

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

我漏了一步吗？我是不是在进口。vue组件的正确方式？我该如何使用hello。应用程序中的vue组件。js？

Answer 1

这里还有@Lukebarden和@thanksd的更多信息。从头开始建立一个Vue应用程序，它是基本的，我一路上删除了一些样式，因为我不想处理它：但它编译了JS：

https://github.com/ed42311/gu-vue-app

可以确认插件，我还没有添加解决方案，但现在我会：）

如果你有任何想法，请告诉我。

Answer 2

除了@thanksd回答：

从vue loader v15开始，需要一个插件：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

https://vue-loader.vuejs.org/guide/

Answer 3

首先，您没有正确导入文件。您应该这样导入它：

import Hello from './hello.vue'

其次，导入组件后，您仍然需要以某种方式注册它。要么全局Vue.component（'hello'， Hello）执行此操作，要么在Vue实例上执行此操作：

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

作为补充说明，如果您希望能够导入文件而不必指定。vue扩展，您可以指定。vue扩展名应该在配置文件中解析。

在这种情况下，配置文件中的解析对象应该如下所示：

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  },
  extensions: ['.js', '.vue', '.json']
}

以下是关于resolve的文档。扩展。