用VUE-CLI 3.x配置项目后我在main.js。
中定义了此组件顺便说一句,未知自定义元素: - 您是否正确注册了组件?对于递归组件,请确保提供"名称"选项。
我无法继续进行上述错误。我如何使用全局组件?
代码..
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.component('staticComponent', {
template: '<div>{{ msg }}</div>',
data() {
return {
msg: 'Hello Static Component'
}
}
})
new Vue({
el: '#app',
render: (h) => {
return h(App)
},
})
app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<StaticComponent/>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld,
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
仅使用 PascalCase
或仅使用 kebab-case
,但是从不使用在命名组件时使用 lowerCamelCase
。这是因为vue
在模板中引用JSX时具有标准。
codepen说明这项工作正常