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

Question

我想在 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

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

Answer 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

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

Import npm package into a Vue.js Single File component

npm

vue.js

vuejs2

jodit