используйте vue-konva с cdn и без компилятора ES6 - PullRequest
Новая
       7

используйте vue-konva с cdn и без компилятора ES6

0 голосов
/ 13 декабря 2018

Возможно использование vue-konva с cdn и без компилятора ES6, я пробую следующий код, приведенный на этой странице https://konvajs.github.io/docs/vue/

<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
  </head>
  <body>
    <div id='app'>
      <v-stage ref="stage" :config="configKonva">
        <v-layer ref="layer">
          <v-circle :config="configCircle"></v-circle>
        </v-layer>
      </v-stage>
    </div>
    <!--1. Link Vue Javascript & Konva-->
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.js'></script>
    <!--2. Link VueKonva Javascript (Plugin automatically installed)-->
    <script src='./lib/vue-konva.min.js'></script>
    <script>
      // 3. Create the Vue instance
      new Vue({
        el: '#app',
        data: {
          configKonva: {
            width: 200,
            height: 200
          },
          configCircle: {
            x: 100,
            y: 100,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4
          }
        }
      })
    </script>
  </body>
</html>

Но ./lib/vue-konva.min.js не существует, и когда я удаляю эту строку

vue.js: 616 [Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

vue.js: 616 [Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

Неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

1 Ответ

0 голосов
/ 13 декабря 2018

Как комментарий, src='./lib/vue-konva.min.js' - это относительный путь.Вы должны иметь этот файл в локальной или CDN-ссылке

Здесь вы можете установить старую версию jsDelivr

Изменить код 

<script src='https://cdn.jsdelivr.net/npm/vue-konva@1.0.7/lib/vue-konva.min.js'>
</script>

Демонстрация на codepen

...