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

【问题标题】：Why is my .vue component undefined?为什么我的 .vue 组件未定义？
【发布时间】：2018-06-11 08:29:25
【问题描述】：

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

编译运行，没有错误，但是在我的浏览器中显示一个空白页面，没有写入内容。我可以在我的 main.js 文件中看到 import .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 }
    });
}

欢迎.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

【问题讨论】：

标签： javascript vue.js babeljs parceljs

【解决方案1】：

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

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

【讨论】：