我按照檔案和Github我做了以下步驟：
使用
npm install vue-konva konva --saveand安裝 vue-konva 和 konva 和 canvasnpm install canvas --save。vuekonva.js在plugins具有以下內容的檔案夾下創建：
import Vue from 'vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
plugins: [ "~/plugins/vuekonva"],在下添加nuxt.config.js我嘗試添加下
nuxt-config.js但仍然沒有運氣：
build: {
standalone: true
},
- 在
pages檔案夾下創建一個頁面并從檔案中添加代碼：
<template>
<div>
<v-stage ref="stage" :config="stageSize">
<v-layer>
<v-text :config="{ text: 'Some text on canvas', fontSize: 15 }" />
<v-rect
:config="{
x: 20,
y: 50,
width: 100,
height: 100,
fill: 'red',
shadowBlur: 10,
}"
/>
<v-circle
:config="{
x: 200,
y: 100,
radius: 50,
fill: 'green',
}"
/>
<v-line
:config="{
x: 20,
y: 200,
points: [0, 0, 100, 0, 100, 100],
tension: 0.5,
closed: true,
stroke: 'black',
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
}"
/>
</v-layer>
<v-layer ref="dragLayer" />
</v-stage>
</div>
</template>
<script>
export default {
data () {
return {
stageSize: {
width,
height
}
}
},
mounted () {
if (process.browser) {
this.stageSize.width = window.innerWidth
this.stageSize.height = window.innerHeight
}
}
}
</script>
我收到錯誤：
Must use import to load ES Module:
我試過沒有插件，它拋出錯誤：
vue.runtime.esm.js:620 [Vue warn]: Unknown custom element: <v-stage> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
不明白是什么問題請幫忙。
uj5u.com熱心網友回復：
根據Nuxt 檔案，一些插件匯出 ES6 模塊。我認為konva節點模塊就是這種情況。我按照你上面提到的步驟。但是在nuxt.config.js檔案中我配置了插件如下：
plugins: [
{ src: "~/plugins/vuekonva", ssr: false }
],
build: {
transpile: ['konva']
},之后，我將您頁面的代碼替換為konvajs的代碼，如下所示：
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
<script>
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};
</script>當我鏈接到帶有nuxt-link. 但是如果我重繪 頁面，我會收到一些可能是 SSR 的錯誤。我不確定，但如果您閱讀此檔案，您也許可以解決 SSR 的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/348558.html
標籤：Vue.js nuxt.js 康瓦伊斯 康瓦 Vue-konva
上一篇：Vuetify：更改<v-overlay>主題時發出警告
下一篇：沒有文字的下拉選單