为什么我的 .vue 组件未定义？

Question

我正在使用 parcel-plugin-vue 从文件编译最简单的 .vue 组件。

编译运行s，没有错误，但在我的浏览器中显示空白页面，没有任何文字。我可以在 main.js 文件中看到导入 .vue 组件在运行时未定义。请问这是为什么？

main.js

import Vue from '../node_modules/vue/dist/vue';
import { Welcome } from './app/widgets/welcome/welcome.vue'; //this is undefined at runtime, but doesn't error

window.onload = startVue;

function startVue() 
{
    new Vue({
        'el': '#app',
        'template': Welcome,
        'components': { Welcome }
    });
}

welcome.vue

<template>
    <div>
        <h1>Welcome</h1>
    </div>
</template>

<script>
    export default 
    {
        components: {}
    }
</script>

<style>
</style>

package.json

{ 
  "main": "index.js", 
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "eslint": "^4.14.0",
    "parcel-bundler": "^1.3.1",
    "parcel-plugin-vue": "^1.4.0"
  },
  "dependencies": {
    "vue": "^2.5.13",
    "vue-material": "^1.0.0-beta-7",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  }
}

编译我运行宁./node_modules/.bin/parcel index.html

Answer 1

您的 Welcome.vue 组件中没有名为 Welcome 的导出，因此您无法使用花括号语法导入它。导入应该在没有花括号的情况下工作：

import Welcome from './app/widgets/welcome/welcome.vue';

为什么我的 .vue 组件未定义？

Why is my .vue component undefined?

javascript

vue.js

babeljs

parceljs