将 vue-konva 与 cdn 一起使用，无需 ES6 编译器
Posted
技术标签:
【中文标题】将 vue-konva 与 cdn 一起使用，无需 ES6 编译器【英文标题】：use vue-konva with a cdn and without a ES6 compiler 【发布时间】：2019-05-14 03:56:06 【问题描述】：可以在没有 ES6 编译器的情况下将 vue-konva 与 cdn 一起使用，我尝试在此页面中提供的下一个代码 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 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
vue.js:616 [Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
未知的自定义元素： - 您是否注册了组件 正确吗？对于递归组件，请确保提供“名称” 选项。
【问题讨论】：
src='./lib/vue-konva.min.js' 是相对路径。您需要在本地拥有此文件或链接到 CDN。
我认为该文件已在 vue-konva v2 中删除。
【参考方案1】：
作为注释，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>
Demo on codepen
【讨论】：
以上是关于将 vue-konva 与 cdn 一起使用，无需 ES6 编译器的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法将 Materialize CDN 与 Next.js 一起使用？
Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用