Question

我正在尝试为Github中的Vue2组件编写一个演示页面。很明显，我想使用自己的组件来演示一些演示用法，但似乎无法正常工作。我不断收到该死的“无法安装组件：模板或渲染功能未定义”错误。当我在自己的项目中使用该组件时，该组件运行正常。如您在我的代码中看到的，我尝试了几种方法，但是没有运气。

这是我的index.html

    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>sko-autocomplete demo</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
        <style>
          [v-cloak] {
            display: none;
          }
        </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>   
  </head>

  <body>
    <div id="app">
      <section class="hero is-primary is-bold">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">
              Scout Kirk Olson's Vue2 Autocomplete component
            </h1> 
            <h2 class="subtitle">
              Input field component to select predefined values or type a custom value using Vue.js v2
            </h2>
          </div>
        </div>
      </section>

      <section>
          <sko-autocomplete></sko-autocomplete>
      </section>
    </div>

    <script>
        require(['./dist/sko-autocomplete.js'], function (skoAutocomplete) {
          //var skoAutocomplete = require(['./dist/sko-autocomplete']).default;
          //var skoAutocomplete = require(['./dist/sko-autocomplete.js']).skoAutocomplete;
          Vue.component('sko-autocomplete', skoAutocomplete);
          var app = new Vue({
            el: '#app',
            data:  {
            },
            components: {
              'sko-autocomplete' : skoAutocomplete
            },

          });
        });        
    </script>

  </body>
</html>

在github页面中使用我自己的vue组件

0 个答案: