javascript - Vue中如何引入一个html（包含css/js）作为一个模块
本文介绍了javascript - Vue中如何引入一个html（包含css/js）作为一个模块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码框架是vue+webpack+node
想在Vue写的页面中引入一个markdown插件editor.md https://github.com/pandao/edi... 作为一个模块
但是editor.md并不能通过npm安装
editor.md插件的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor</title>
</head>
<body>
<div id="editormd">
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<link rel="stylesheet" href="css/editormd.min.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/editormd.min.js"></script>
<script type="text/javascript">
/* eslint-disable */
$(function () {
editormd("editormd", {
width: "98%",
height: 730,
path: "lib/", // Autoload modules mode, codemirror, marked... dependents libs path
codeFold: true,
saveHTMLToTextarea: true,
searchReplace: true,
htmlDecode: "style,script,iframe|on*",
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持，默认关闭
flowChart: true, // 开启流程图支持，默认关闭
sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "examples/php/upload.php",
onload: function () {
console.log('onload', this);
}
});
});
</script>
</body>
</html>
效果如下：
想把这个当做一个模块放到vue实现的页面中，不知该如何做到
解决方案
类似的第三方插件，都可以用这样的方式组织成一个vue组件：
<template>
<div id="id">
<textarea></textarea>
</div>
</template>
<script>
import scriptjs from 'scriptjs'
export default {
props: {
id: String
},
mounted() {
// 获取依赖的资源 - 如果需要异步加载的话
Promise.all([
scriptjs('jquery.min.js'),
scriptjs('editormd.min.js')
])
.then(() => {
// do your logic.
// 实例化，绑定事件等操作
})
},
destoryed() {
// 解绑全局事件
// 销毁实例
},
methods: {
// 返回一些有用的函数
}
}
</script>实例化之后，监听实例提供的方法；然后再$emit给使用者，再提供一些get方法用于获取内部属性，等等。
具体的实现可以参考vue-ueditor、vue-echarts类似的。
使用方法：
<editor-md id="editormd" @update="doUpdate"></editor-md>这篇关于javascript - Vue中如何引入一个html（包含css/js）作为一个模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
