我有一个vuejs网络组件,我正在尝试在我的nextjs项目中使用它,但是出现错误ReferenceError: Vue is not defined
。
我尝试将vue直接导入到布局文件中,在该布局文件中导入Web组件,并且尝试了各种解决方法,但似乎没有任何效果。
如何正确导入Vue并将Web组件使用到我的应用程序中?
my-test.js
<template>
<div>
<span><strong>Total: </strong>{{total}}</span>
</div>
</template>
<script>
export default {
props: {
num1: Number,
num2: Number
},
computed: {
total() {
return parseInt(this.num1) + parseInt(this.num2);
}
}
}
</script>
demo.html
<meta charset="utf-8">
<title>my-test demo</title>
<script src="https://unpkg.com/vue"></script>
</script>
<script src="./my-test.js">
</script>
<my-test></my-test>
layout.js
import React, { Component } from 'react';
import './dist/my-test.js'
import Vue from './dist/Vue'
window.Vue = Vue
const Layout = ({ children }) => (
<div className='layout'>
<GlobalStyle />
<Head>
</Head>
<Wrap>
<my-test />
<Footer />
</Wrap>
</div>
)
导出默认布局 Vue.js
import Vue from 'vue'
window.Vue = Vue
export default Vue