- 首页
- 前端开发
- Nuxt 抛出:类构造函数 i 不能在没有“new"的情况下被调用
Nuxt 抛出:类构造函数 i 不能在没有“new"的情况下被调用
[英] Nuxt throws: Class constructor i cannot be invoked without 'new'
本文介绍了Nuxt 抛出:类构造函数 i 不能在没有“new"的情况下被调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 Vuejs 中使用 drawflow npm 库/Nuxtjs 应用程序，但是当我启动应用程序时出现以下错误:
类构造函数 i 不能在没有 'new' 的情况下被调用
以下是我按照 文档 遵循的步骤:
- 使用
npm i drawflow --save 安装 drawflowVue 组件，代码如下:
<div class="container-fluid"><div class="row"><div class="col-sm-12"><h1>绘制流程</h1><div id="drawflow";ref="drawflow"/>
<脚本>从'vue'导入Vue从'drawflow'导入DrawflowVue.use(Drawflow)导出默认{name: '应用程序',数据 () {返回 {}},挂载(){const id = document.getElementById('drawflow')控制台日志(ID)this.editor = new Drawflow(id, Vue, this)this.editor.start()},方法: {}}<风格>@import 'drawflow/dist/drawflow.min.css';</风格>
- 我的
nuxt.config.js文件:
导出默认{//全局页头:https://go.nuxtjs.dev/config-head头: {title: "应用 | 生成器",html属性:{朗:恩"},元:[{字符集:utf-8"}，{ name: "viewport", content: "width=device-width, initial-scale=1" },{隐藏:描述"，名称:描述"，内容:"}，{名称:格式检测"，内容:电话=否"}],脚本: []，关联: [{ rel: "icon", type: "image/x-icon", href: "/Logo.ico" },{rel: "样式表",href: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"},{rel: "样式表",href: "https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"}]},//全局 CSS:https://go.nuxtjs.dev/config-csscss: ["@/assets/css/styles.css"],//在渲染页面之前运行的插件:https://go.nuxtjs.dev/config-plugins插件: [{ 源代码:~/插件/总线"，模式:客户端"}],//自动导入组件:https://go.nuxtjs.dev/config-components成分:真实，//用于开发和构建的模块(推荐):https://go.nuxtjs.dev/config-modules构建模块:[//https://go.nuxtjs.dev/eslint["@nuxtjs/eslint-module",{修复:正确}],["@nuxtjs/dotenv"]],//模块:https://go.nuxtjs.dev/config-modules模块: ["@nuxtjs/axios", "bootstrap-vue/nuxt"],//axios 模块配置:https://go.nuxtjs.dev/config-axios轴:{baseURL: process.env.API_URL,标题:{内容类型":文本/纯文本"}},//构建配置:https://go.nuxtjs.dev/config-build建造: {转译:[drawflow"]},服务器: {端口:5000},视图:{配置:{生产提示:假，开发工具:真的}}};
- 以下是我的
.eslintrc.js:
module.exports = {根:真的，环境:{浏览器:是的，节点:真},解析器选项:{解析器:'@babel/eslint-parser',要求配置文件:假},扩展:['@nuxtjs','插件:nuxt/推荐'],插件: [],//在此处添加您的自定义规则规则:{}}
解决方案
我已经在相关的 Github issue 如果你想看一看.
同时，这也是答案.
您需要不要忘记按照本节中的说明进行转译.
那么，这种代码应该可以让整个事情正常运行
<div class="container-fluid"><div class="row"><div class="col-sm-12"><h1>绘制流程</h1><div id="drawflow-graph";ref="drawflow"/>
<脚本>从'vue'导入Vue导出默认{数据() {返回 {{}，}},异步挂载(){constimportedModule = await import('drawflow')const Drawflow =importedModule.defaultthis.editor = new Drawflow(this.$refs.drawflow, Vue, this)this.editor.start()this.editor.addNode('github',0,1、150,300,'github','名称'，'酷 Vue 示例')},}<风格>@import 'drawflow/dist/drawflow.min.css';#drawflow-graph {宽度:800px；高度:800px；边框:2px 实心青色；}</风格>
在我这边工作得很好
I am using drawflow npm library in my Vuejs/Nuxtjs application but when I start the application I get the following error:
Class constructor i cannot be invoked without 'new'
Following are the steps I have followed as per documentation:
- Install the
drawflow using npm i drawflow --save
Vue Component with following code:
<template>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>Drawflow</h1>
<div id="drawflow" ref="drawflow" />
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import Drawflow from 'drawflow'
Vue.use(Drawflow)
export default {
name: 'App',
data () {
return {
}
},
mounted () {
const id = document.getElementById('drawflow')
console.log(id)
this.editor = new Drawflow(id, Vue, this)
this.editor.start()
},
methods: {
}
}
</script>
<style>
@import 'drawflow/dist/drawflow.min.css';
</style>
- My
nuxt.config.js file:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "App | Generator",
htmlAttrs: {
lang: "en"
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" }
],
script: [],
link: [
{ rel: "icon", type: "image/x-icon", href: "/Logo.ico" },
{
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
},
{
rel: "stylesheet",
href: "https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
}
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["@/assets/css/styles.css"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{ src: "~/plugins/bus", mode:"client" }
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
[
"@nuxtjs/eslint-module",
{
fix: true
}
],
["@nuxtjs/dotenv"]
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: ["@nuxtjs/axios", "bootstrap-vue/nuxt"],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
baseURL: process.env.API_URL,
headers: {
"Content-Type": "text/plain"
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ["drawflow"]
},
server: {
port: 5000
},
vue: {
config: {
productionTip: false,
devtools: true
}
}
};
- Following is my
.eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '@babel/eslint-parser',
requireConfigFile: false
},
extends: [
'@nuxtjs',
'plugin:nuxt/recommended'
],
plugins: [
],
// add your custom rules here
rules: {}
}
解决方案
I've answered in the related Github issue if you want to give it a look.
Meanwhile, here is the answer too.
You need to not forget to transpile as told in this section.
Then, this kind of code should make the whole thing work
<template>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>Drawflow</h1>
<div id="drawflow-graph" ref="drawflow" />
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data() {
return {
editor: {},
}
},
async mounted() {
const importedModule = await import('drawflow')
const Drawflow = importedModule.default
this.editor = new Drawflow(this.$refs.drawflow, Vue, this)
this.editor.start()
this.editor.addNode(
'github',
0,
1,
150,
300,
'github',
'name',
'Cool Vue example'
)
},
}
</script>
<style>
@import 'drawflow/dist/drawflow.min.css';
#drawflow-graph {
width: 800px;
height: 800px;
border: 2px solid teal;
}
</style>
Working perfectly fine on my side
这篇关于Nuxt 抛出:类构造函数 i 不能在没有“new"的情况下被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
