Question

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

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

只有import Vue from 'vue'的最小示例才有效！ Webpack将vue库和我自己的代码编译成一个包。

但是现在，我想将vue-loader添加到webpack配置中，以便.vue文件被转换。我已经安装了vue loader：

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

我已经在webpack配置中添加了vue-loader：

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

我创建了hello.vue

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

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

在我的应用程序中，我导入'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!")
      }
    })

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

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

修改

尝试import hello from 'hello.vue'时收到错误：

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

我错过了一步吗？我是否以正确的方式导入.vue组件？如何使用app.js中的hello.vue组件？

Answer 1

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

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对象应如下所示：

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

Here's the documentation on resolve.extensions.

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

在这里加上@lukebearden和@thanksd标记更多信息。从头开始设置Vue应用程序，这是基本操作，我会删除一些样式，因为我不想处理它：但是它会编译JS：

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

可以确认有关插件的信息，但我还没有添加解决方法，但是现在我会：）

让我知道您是否有任何想法。

Answer 4

您可能需要注册该组件才能在另一个Vue组件中使用。在您的示例中，就像

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

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

如何在不使用vue-cli的情况下使用vue-loader

4 个答案: