如何使用vue-loader而不使用vue-cli

Question

我正在尝试使用webpack来转译.vue文件的Vue项目的绝对最小示例。

我的目标是详细了解每个构建步骤。大多数教程建议使用vue-cli并使用webpack-simple配置。尽管这个设置起作用，但为了我的简单目的，这看起来过分了。现在我不想让babel，linting或者带有热模块重载的live web服务器。

一个简单的例子，只有import Vue from 'vue'工程！ Webpack将vue库和我自己的代码编译成一个包。

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

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

而且我已经加入VUE装载机到的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' 
    } 
    } 
}; 

我创建hello.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!") 
     } 
    }) 

Th Ë装载机似乎没有拿起.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.