时间戳

首页 > 解决方案 > 无法安装组件：未定义模板或渲染函数。“vue.js”与 asp.net mvc

asp.net-mvc - 无法安装组件：未定义模板或渲染函数。“vue.js”与 asp.net mvc

问题描述

我有一个小教程项目，我写它是为了学习将 vue.js 与 mvc 集成。
我有 1 个组件，我在 vue 实例中使用它，当我将这些组件的 html 代码写入 js 文件（每个 vue 组件有 2 个文件 .cshtml 和 .js）时，一切正常
，工作场景是

test1.cshtml。 js文件是

import Vue from "vue";
document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{        
        mounted: function () { },
        data: function () {
            return {
            };

        },
        template: `
                <div>
                <ul>
                    <li>Yaman</li>
                </ul>
                </div>
  `
    });
});

和 vue 实例是

contact.cshtml.js 文件是

import Vue from "vue";

import test1 from "../Home/test1.cshtml.js"; Vue.component('test1', test1);

document.addEventListener('DOMContentLoaded', function (event) {
    let view = new Vue({
        el: document.getElementById('view'),          
        mounted: function () { },
        data: {
            message: "One-way binding msg",
            twoWayBindingMessage: "Type here ..."
        }        
    }); });

和contact.cshtml文件是

@{
    ViewData["Title"] = "Hello World - Page";
}

<section>
    <div id="view">
        <h4>@ViewData["Title"]</h4>
        <h3>@ViewData["Message"]</h3>
        <div>
            <span>One way binding message:{{message}}</span>
            <br /><hr />
            <span>2-way binding msg: {{twoWayBindingMessage}}</span><br />
            <br />
            <input type="text" v-model="twoWayBindingMessage">

            <test1></test1>
        </div>
    </div>
</section>
<script src="~/js/Contact.bundle.js"></script>

但是当我尝试将 test1 模板写入单独的文件“cshtml 文件”作为“联系人文件”时，我的问题就开始了

不工作的场景是

test1.cshtml 文件变成

import Vue from "vue";

document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{        
        mounted: function () { },
        data: function () {
            return {
            };
        }
    });
});

和 test1.cshtml 是

<section>
    <div  id="testnew">
        <ul>
            <li>Yaman</li>
        </ul>
    </div>        
</section>
<script src="~/js/test1.bundle.js"></script>

在这种情况下，我收到此错误

Contact.bundle.js:6 [Vue 警告]：无法挂载组件：未定义模板或渲染函数。

在发现

--->

任何人都可以帮助我吗？

标签： asp.net-mvcvue.jsvuejs2

解决方案

最后我找到了解决方案:) 我们应该
1- 在安装 html 加载器后将此部分添加到 webback.config

    {
        test: /\.(html|cshtml)$/,
        loader: 'html-loader'
    },

2-在.js文件中导入cshtml文件

import test1Html from "../Home/test1.cshtml";


3-在js文件中使用上述导入作为模板

template: test1Html,


vue组件js文件应该如下

import Vue from "vue";
import test1Html from "../Home/test1.cshtml";

document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{
        mounted: function () {
            console.log('mounted test1');
        },
        template: test1Html,
        data: function () {
            return {
                message: "try test1 binding",
                list: ['one','two','three','four','five']
            };
        }
    });
});

多谢。

推荐阅读