Nuxt使用Drawflow报错Cannot call a class as a function问题求助

• 核心错误：Drawflow 是普通JS类，不是Vue插件，你多次调用Vue.use(Drawflow)时，Vue会尝试执行传入对象的install方法，不存在的话就会直接把传入的对象当做函数调用，触发「不能将类作为函数调用」的报错
• 次要问题1：plugins/drawflow.js里存在拼写错误，将Drawflow错写为Drwaflow
• 次要问题2：重复注册逻辑，插件里已经注册过一次，组件mounted里又重复引入、重复调用Vue.use

1. 清理冗余配置 #

删掉plugins/drawflow.js文件，同时修改nuxt.config.js，移除drawflow相关的plugin配置和build.transpile配置：

// nuxt.config.js 调整后
plugins: [
  // 移除drawflow相关的plugin条目
],

build: {
  // 移除transpile里的drawflow项
}

2. 调整页面组件代码 #

不需要调用Vue.use，直接实例化Drawflow类即可，同时记得引入样式文件：

<script>
import Vue from 'vue'
import Drawflow from 'drawflow'
import 'drawflow/dist/drawflow.min.css'

export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    const drawflowDom = document.getElementById('drawflow')
    this.editor = new Drawflow(drawflowDom, Vue, this)
    this.editor.start()
  }
}
</script>

内容的提问来源于stack exchange，提问作者BATMAN_2008