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

Question

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

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

仅 import Vue from 'vue' 的最小示例即可！ webpack把vue库和我自己的代码编译成一个bundle

但是现在，我想将 vue-loader 添加到 webpack 配置中，这样 .vue 文件就会被转译。我已经安装了 vue 加载器：

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

我创建了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

How use vue-loader without vue-cli

webpack

vue.js

vue-cli