问题描述
限时送ChatGPT账号..我在 Vuejs 中创建了多个组件，想在主组件中使用，但出现此错误
无法挂载组件:未定义模板或渲染函数.在我的应用程序的任何地方使用之前，我是否需要导入它们?(就像我们需要在 Angular 中导入 app-module.ts 文件，因为我来自 angular 背景)
这里是错误详情
PS:我对Vuejs很陌生，我正在使用某人的github repo以便更好地理解
我的一个组件的例子
<div class="progressbar-container"><div class="progressbar-values"><span>{{名称}}</span><span>{{百分比}}%</span><div class="progressbar"><span class="progress" :style="'width:' + 百分比 + '%'"><span class="thumb"></span></span>
</模板><脚本>导出默认{道具: {姓名: {类型:字符串},百分比: {类型:字符串}},安装(){//}}
用于注册代码的main.js文件的代码
//要使用 `import` 命令加载的 Vue 构建版本//(runtime-only or standalone) 已经在 webpack.base.conf 中设置了别名.从'vue'导入Vue从 'v-lazy-img' 导入 LazyImg；从vue-router"导入路由器从'vue-masonry'导入VueMasonryPlugin；从'./App'导入应用程序//指令Vue.directive('ripple', require('./directives/Ripple.js'));//VUE 组件Vueponent('jain-sidenav', require('./components/jain-sidenav/jain-sidenav.vue'));//Vueponent('jain-card-cover', require('./components/jain-card/jain-card-cover.vue'));....等等等等//V-懒惰-IMGVue.use(LazyImg);//VUE-MASONRYVue.use(VueMasonryPlugin);Vue.config.productionTip = falseVue.use(路由器)//为第一个/最重要的组件导入，用于异步加载的常量从'./views/profile.vue'导入配置文件；const resume = require('./views/resume.vue');从'./views/resume.vue'导入简历；const projects = require('./views/projects.vue');const notfound = require('./views/notfound.vue');const 路由器 = 新路由器({路线:[{路径:'/'，组件:配置文件，名称:'配置文件'}，{ 路径:'/profile'，组件:配置文件，名称:'配置文件'}，{路径:'/简历'，组件:简历，名称:'简历'}，{ 路径:'/projects'，组件:项目，名称:'项目'}，{ 路径:'/404'，组件:未找到，名称:'404 - 未找到'}，{ 路径:'*'，重定向:'404' }]})/* eslint-disable no-new */新的 Vue({el: '#app',路由器，模板:'<App/>',组件:{应用}})这个组件在我看来是正确的.您的问题可能与您拥有的 Vue 构建有关.如果您只有 Vue 的运行时构建，您将无法使用单文件组件，因此您需要使用 Vue 的完整构建.https://vuejs/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
I have created number of components in Vuejs and want to use in main component but getting this error
Failed to mount component: template or render function not defined.
Should i need to import those before use anywhere in my app ? (like we need to import in app-module.ts file in Angular as i am from angular background)
Here is error details
PS: I am quite new to Vuejs, i am using someone's github repo for better understanding
Example of my one component
<template>
<div class="progressbar-container">
<div class="progressbar-values">
<span>{{ name }}</span>
<span>{{ percentage }}%</span>
</div>
<div class="progressbar">
<span class="progress" :style="'width: ' + percentage + '%'">
<span class="thumb"></span>
</span>
</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String
},
percentage: {
type: String
}
},
mounted() {
//
}
}
</script>
Code of main.js file for registering code there
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import LazyImg from 'v-lazy-img';
import Router from 'vue-router'
import VueMasonryPlugin from 'vue-masonry';
import App from './App'
// DIRECTIVES
Vue.directive('ripple', require('./directives/Ripple.js'));
// VUE COMPONENTS
Vueponent('jain-sidenav', require('./components/jain-sidenav/jain-sidenav.vue'));
//Vueponent('jain-card-cover', require('./components/jain-card/jain-card-cover.vue'));
....etc etc
// V-LAZY-IMG
Vue.use(LazyImg);
// VUE-MASONRY
Vue.use(VueMasonryPlugin);
Vue.config.productionTip = false
Vue.use(Router)
// IMPORT FOR FIRST/MOST IMPORTANT COMPONENT, CONST FOR ASYNC LOADING
import profile from './views/profile.vue';
const resume = require('./views/resume.vue');
import Resume from './views/resume.vue';
const projects = require('./views/projects.vue');
const notfound = require('./views/notfound.vue');
const router = new Router({
routes: [
{ path: '/', component: profile, name: 'Profile ' },
{ path: '/profile', component: profile, name: 'Profile' },
{ path: '/resume', component: resume, name: 'Resume' },
{ path: '/projects', component: projects, name: 'Projects' },
{ path: '/404', component: notfound, name: '404 - not found' },
{ path: '*', redirect: '404' }
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
解决方案
The component looks correct to me. Your issue is likely related to the build of Vue you have. If you only have the runtime build of Vue you will not be able to use the single-file components, so you'll need to use the full build of Vue. https://vuejs/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
这篇关于无法挂载组件:在 Vuejs 中的其他组件中使用时未定义模板或渲染函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论