时间戳

首页 > 解决方案 > 将 npm 包导入 Vue.js 单文件组件

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

问题描述

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

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

标签： vue.jsnpmvuejs2jodit

解决方案

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

import { Jodit } from 'jodit'

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

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

要创建Jodit实例，我们需要为现有的<textarea>. Vue 组件的元素在mounted()生命周期钩子中可用（不在created()钩子中），因此我们将在此处初始化：

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

演示

推荐阅读