Javascript 如何在my.cshtml页面中调用Vue组件？

我有一个ASP.NET核心MVC项目与Vue.js结合使用。我只使用Vue.js使我的页面具有反应性。我的目标是基于_layout.cshtml文件中的div创建一个主vue实例，然后使用X模板创建vue组件，并在我的web应用程序中使用它们。值得一提的是，我希望在自己的.JS文件中包含JS Vue.Component（）逻辑，因为其中一些组件将具有大量的JS逻辑

我遇到的问题是，当我从要使用的.cshtml调用我的组件时，让Vue注册/识别它们。我发现这篇stackoverflow文章展示了如何使用逻辑来实现这一点，但是他的示例显示了cshtml中的JS逻辑，这是我试图避免的，并且没有关于如何从另一个页面调用vue组件的示例

我得到的错误是。。。 [Vue warn]未能装载组件：未定义模板或渲染功能

技术堆栈：

• ASP.NET核心MVC（2.2）
• Vue.js（2.6.10）
• Vue模板编译器（2.6.10）

---

• Vue loader（15.7.0）这稍微改变了您的结构（不使用脚本x-template语法），但它对我很有用。如果可以的话，试试这个
  由于您希望重用此组件，因此在您的情况下，可以全局注册它
  在这里使用模板文字，所以需要确保IE11的传输正确

  //testComponent.js
  组件（“我的组件”{
  模板：`
  我的测试标题
  `,
  数据（）{
  返回{}
  },
  // ...
  })
  

  然后在App_Start/BundleConfig.cs中，为全局组件创建一个包，并在_layout.cshtml渲染脚本上渲染该包

  //BundleConfig.cs
  公共静态无效注册表绑定（BundleCollection绑定）
  {
  添加（新脚本包（“~/bundles/vuecomponents”）。包括(
  “~/Scripts/VueComponents/testComponent.js”
  ));
  }
  

  ---

  现在，您应该能够在应用程序中的任何.cshtml页面上包含
  。
  这是一个很长的答案，但长话短说的cshtml文件和razor与vue.js无关。您很可能需要创建一个REST api，Vue将从Vue中提取数据或将json对象暴露给我的新Vue（）实例中已经测试过的Vue axios，我可以从api中获取数据并将其呈现在_layout.cshtml上。但是，我的目标是创建vue组件，并在我的UI中呈现这些组件（在其他.cshtml页面中）。不完全确定你的评论是什么意思。你认为有可能在cshtml文件中使用HTML而不是js文件吗？我更喜欢将HTML放在JS文件之外。然而，我仍将尝试这种可能的解决方案，并报告我的发现。谢谢@阿德里安克鲁兹：这是可能的，但我没有开枪，对不起。让我知道^_^

      <div id="main-app">
       @RenderBody() 
      </div> 
  @section Scripts {
      <script src="@Url.Content("~/js/mainVueApp.js")"></script>
  
  }
  

   import Vue from 'vue';
      import myComponent from 'testComponent';
  
          new Vue({
           el: 'main-app',
           components: {
              myComponent 
              // I also tried, thisIsMyComponent: myComponent. No luck with that either.
            }
         });
  

      @model TestViewModel 
  
          <script type="text/x-template" id="my-test-component-id">
                  <div class="card">
                      <div class="card-header"> My Test Header </div>
  
                      <div class="card-body">
                             <table class="table"> 
                               <thead> 
                                    <tr> 
                                       <th class="pull-right">
                                         Test Header 
                                       </th>
                                    </tr>
                               </thead>
  
                               <tbody>
                                  <tr v-if="isShowRow"> 
                                       <th class="pull-right">
                                         Test Header AGAIN 
                                       </th>
  
                                       <tr class="pull-right">
                                           @(Html.Kendo.CurrencyTextBoxFor(m => 
                   m.TestProperty).HtmlAttributes(new Dictionary<string, object>{
                                   {"id", "test-text-box"},
                                   {"class", "textbox-input"},
                                   {"v-model", "testTextBoxValue"}
                                   }).Deferred()
                                   )
                                       </tr>
                                    </tr>
                               </tbody>
                             </table>
                       </div>
                  </div>
              </script>
  @section Scripts {
          <script src="@Url.Content("~/js/testComponent.js")"></script>
  
      }
  

  import Vue from 'vue';
  import axios from 'axios';
  
  let testComponent = Vue.Component('my-component', {
      template: 'my-test-component-id',
      data: function() {          
         return {
        testTextBoxValue : 'Test Value',
        isShowRow: true
       }
  
     },
      methods: {
      // Nothing for now....
   }
  });
  
  //I tried it without default, but it doesn't work either :(
  export default {
  testComponent 
  };
  

  <div class="row"> 
    <div class="col-12">
        @* Call the Component *@
        @* Do I need to load the .cshtml where this component lives first, as a partial view or something? *@
         <my-component> </my-component>
    </div>
  </div>
  

  // _layout.cshtml
  
  @Scripts.Render("~/bundles/vuecomponents")