将 npm 包导入 Vue.js 单文件组件

Posted 2023-02-16

【中文标题】将 npm 包导入 Vue.js 单文件组件

【英文标题】：Import npm package into a Vue.js Single File component

【发布时间】：2021-03-17 13:22:39

【问题描述】：

我想在 SFC 中使用 Jodit，但我不确定应该如何完成。我意识到有一个包装器 (jodit-vue)，但出于教育目的，我想知道没有它是如何完成的。我用默认预设创建了一个 Vue CLI 项目，我改变的只是App.vue：

<template>
  <div id="app">
    <textarea id="editor" name="editor"></textarea>
  </div>
</template>

<script>
import "../node_modules/jodit/build/jodit.min.js"

export default 
  name: 'App',
  created()
    let editor = new Jodit('#editor');
    editor.value = '<p>start</p>';
  

</script>

<style>
@import "../node_modules/jodit/build/jodit.min.css" ;
</style>

这会产生错误：error 'Jodit' is not defined no-undef，并且 如果我将导入更改为：

import Jodit from "../node_modules/jodit/build/jodit.min.js"

然后编译就好了，但是浏览器控制台说：

vue.runtime.esm.js?2b0e:1888 TypeError: _node_modules_jodit_build_jodit_min_js__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor

诚然，我对这一切都很陌生，但我很感激能指出正确的方向。

【参考方案1】：

jodit 模块导出 Jodit 构造函数，因此您的组件将像这样导入它：

import  Jodit  from 'jodit'

您还需要Jodit styles，可以这样导入：

import 'jodit/build/jodit.min.css'

要创建Jodit 实例，我们需要为现有<textarea> 提供一个元素或选择器。 Vue 组件的元素在 mounted() lifecycle hook 中可用（不在 created() 钩子中），因此我们将在此处进行初始化：

export default 
  mounted() 
    const editor = new Jodit('#editor')
    editor.value = '<p>start</p>'
  ,

demo