Javascript vue组件(静态)不工作。我想解决这个问题
使用vue cli 3.x配置项目后, 我在main.js中定义了这个组件 顺便说一下, 未知自定义元素:-您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。 我无法继续处理上述错误。 如何使用全局组件 代码..Javascript vue组件(静态)不工作。我想解决这个问题,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,使用vue cli 3.x配置项目后, 我在main.js中定义了这个组件 顺便说一下, 未知自定义元素:-您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。 我无法继续处理上述错误。 如何使用全局组件 代码.. main.js 从“Vue”导入Vue 从“./App.vue”导入应用程序 Vue.config.productionTip=false Vue.component('staticComponent'{ 模板:“{{msg}}”, 数据(){ 返回{ msg:'你好,静态组
main.js
从“Vue”导入Vue
从“./App.vue”导入应用程序
Vue.config.productionTip=false
Vue.component('staticComponent'{
模板:“{{msg}}”,
数据(){
返回{
msg:'你好,静态组件'
}
}
})
新Vue({
el:“#应用程序”,
渲染:(h)=>{
返回h(应用程序)
},
})
App.vue
从“./components/HelloWorld.vue”导入HelloWorld
导出默认值{
名称:“应用程序”,
组成部分:{
HelloWorld,
}
}
#应用程序{
字体系列:“Avenir”、Helvetica、Arial、无衬线字体;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
文本对齐:居中;
颜色:#2c3e50;
边缘顶部:60像素;
}
在命名组件时,要么只使用PascalCase
要么只使用kebab-case
,但千万不要使用lowerCamelCase
。这是因为vue
在模板中引用JSX时有标准
你好?它在我的代码中仍然不起作用。我不知道是否会附加我的package.json文件的一些内容。依赖项:{“vue”:“^2.5.17”;“devdependences”:“{@vue/cli plugin babel”:“^3.2.0”;“@vue/cli plugin eslint”:“^3.2.0”;“@vue/cli服务”:“^3.2.0”;“babel eslint eslint”:“^10.0.1”、“eslint”:“^5.8.0”、“eslint plugin vue”:“^5.0-0”,“vue模板编译器”:“^2.5.17”}
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)
},
})
<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>