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

Question

我正在使用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>

包.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您的组件中没有指定导出Welcome.vue，因此您无法使用大括号语法导入它。导入应该在没有花括号的情况下工作：

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