ReferenceError:在nextjs项目中使用Web组件时未定义Vue

时间:2020-11-05 10:21:07

标签: javascript vue.js

我有一个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

0 个答案:

没有答案