将npm包导入Vue.js单文件组件
将npm包导入Vue.js单文件组件
提问于 2020-12-06 03:58:48
我想在证监会中使用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
Stack Overflow用户
回答已采纳
发布于 2020-12-06 05:20:24
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>'
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65161363
复制相关文章
相似问题
腾讯云开发者
