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

时间:2018-01-01 05:20:53

标签: javascript vue.js babeljs parceljs

我正在使用import java.net.URL; import java.net.URLConnection; import java.util.Calendar; import java.util.Scanner; import java.util.regex.Pattern; import java.util.GregorianCalendar; import java.util.Calendar; import java.util.ArrayList; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.net.URL; import java.net.URLConnection; import java.util.Scanner; public class A_OpenURL { public Scanner input; public A_OpenURL() { String url="http://eoddata.com/data/filedownload.aspx?e=AMEX&sd=20171228&ed=20171228&d=4&k=axuiuqhav5&o=d&ea=1&p=0"; try { URL yhoofin=new URL(url);//Create New URL data URLConnection data=yhoofin.openConnection();//Open a connection input = new Scanner(data.getInputStream()); System.out.println("Scanner Worked");//get data from input stream //System.out.println("This is the scanner "+input); //System.out.println("This is the first line "+this.nextline()); //System.out.println("This is the first line "+this.nextline()); } catch(Exception e) { //System.out.println("C This is the symbol i failed on "+symbol); //System.err.println(e); } } public Scanner getScan() { return input; } //determine if file has next entry public boolean hasnext() { return input.hasNext(); } //contains next line public String nextline() { return input.nextLine(); } public static void main(String[] args) { A_OpenURL test1a=new A_OpenURL(); System.out.println("It worked"); System.out.println(test1a.getScan()); String first=test1a.nextline(); System.out.println(first); test1a.input.close(); } } 从文件中编译最简单的.vue组件。

编译运行,没有错误,但显示空白页面,浏览器中没有写入内容。我可以在main.js文件中看到导入.vue组件在运行时是未定义的。为什么这样呢?

IDE

main.js

parcel-plugin-vue

welcome.vue

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

的package.json

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

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

<style>
</style>

要编译我正在运行{ "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" } }

1 个答案:

答案 0 :(得分:4)

Welcome组件中没有名为Welcome.vue的导出,因此您无法使用大括号语法导入它。导入应该没有大括号:

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