Vue Native 使用本地定义的组件问题
Vue Native using locally defined component issue
我正在测试 Vue Native。非常熟悉原生 iOS 和 Android 开发以及 web/SPAs 上下文中的 Vuejs。我想我会给 Vue Native 一个机会,看看如何将它用于我们的一些较小的项目。虽然刚刚开始,但我 运行 遇到了一个问题。请参阅下面我的步骤来重现我 运行 遇到的问题。
创建一个新项目:
vue-native init vuenativetest --no-expo
然后我按照这里的基本 hello world 说明进行操作:
https://vue-native.io/getting-started.html
react-native run-ios --simulator "iPhone 11"
// 工作正常
然后我从这里跳到设置我自己的基本组件,但最初尝试 'organize' 代码。
https://vue-native.io/docs/composing.html
创建components/HeaderTest.vue
<template>
<div>Hello Header</div>
</template>
<script>
export default {
name: "HeaderTest.vue"
}
</script>
<style scoped>
</style>
App.vue
<template>
<view class="container">
<header-test />
<text class="text-color-primary">{{ message }}</text>
<button title="Press me!" @press="exclaim" />
</view>
</template>
<script>
import HeaderTest from "./components/HeaderTest";
export default {
components: { HeaderTest },
data() {
return {
message: "Hello World"
};
},
methods: {
exclaim() {
this.message += "!";
}
},
};
</script>
<style>
.container {
flex: 1;
background-color: white;
align-items: center;
justify-content: center;
}
.text-color-primary {
color: blue;
font-size: 30px;
}
</style>
react-native run-ios --simulator "iPhone 11"
// 启动但看到以下错误
Invariant Violation: Element type is invalid: expected a string (for
built-in components but got: undefined). You likely forgot to export
your component from the file it's defined in, or you might have mixed
up default and named inports....
另请注意,我也曾尝试将其移至目录的根目录,但无济于事。
我在这里做错了什么?提前感谢您的指导。
编辑:创建了一个 git 回购协议,如果有人想查看所有代码:https://github.com/djneely/vuenativetest
您使用的 div 标签似乎不受支持。正确的标签是文本或视图。 https://vue-native.io/docs/basic-components.html
谢谢。看来我对这里的 React 很陌生。根据您的评论。我更新了 HeaderTest 代码,现在状态良好。谢谢!
<template>
<view>
<text>Hello Header</text>
</view>
</template>
我正在测试 Vue Native。非常熟悉原生 iOS 和 Android 开发以及 web/SPAs 上下文中的 Vuejs。我想我会给 Vue Native 一个机会,看看如何将它用于我们的一些较小的项目。虽然刚刚开始,但我 运行 遇到了一个问题。请参阅下面我的步骤来重现我 运行 遇到的问题。
创建一个新项目:
vue-native init vuenativetest --no-expo
然后我按照这里的基本 hello world 说明进行操作: https://vue-native.io/getting-started.html
react-native run-ios --simulator "iPhone 11"
// 工作正常
然后我从这里跳到设置我自己的基本组件,但最初尝试 'organize' 代码。 https://vue-native.io/docs/composing.html
创建components/HeaderTest.vue
<template>
<div>Hello Header</div>
</template>
<script>
export default {
name: "HeaderTest.vue"
}
</script>
<style scoped>
</style>
App.vue
<template>
<view class="container">
<header-test />
<text class="text-color-primary">{{ message }}</text>
<button title="Press me!" @press="exclaim" />
</view>
</template>
<script>
import HeaderTest from "./components/HeaderTest";
export default {
components: { HeaderTest },
data() {
return {
message: "Hello World"
};
},
methods: {
exclaim() {
this.message += "!";
}
},
};
</script>
<style>
.container {
flex: 1;
background-color: white;
align-items: center;
justify-content: center;
}
.text-color-primary {
color: blue;
font-size: 30px;
}
</style>
react-native run-ios --simulator "iPhone 11"
// 启动但看到以下错误
Invariant Violation: Element type is invalid: expected a string (for built-in components but got: undefined). You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named inports....
另请注意,我也曾尝试将其移至目录的根目录,但无济于事。
我在这里做错了什么?提前感谢您的指导。
编辑:创建了一个 git 回购协议,如果有人想查看所有代码:https://github.com/djneely/vuenativetest
您使用的 div 标签似乎不受支持。正确的标签是文本或视图。 https://vue-native.io/docs/basic-components.html
谢谢。看来我对这里的 React 很陌生。根据您的评论。我更新了 HeaderTest 代码,现在状态良好。谢谢!
<template>
<view>
<text>Hello Header</text>
</view>
</template>