Vue中如何引入一个html(包含css/js)作为一个模块

代码框架是vue+webpack+node

想在Vue写的页面中引入一个markdown插件editor.md https://github.com/pandao/edi... 作为一个模块

但是editor.md并不能通过npm安装

editor.md插件的html代码:

https://img1.mukewang.com/5c19eac50001b54507880821.jpg

效果如下:

https://img3.mukewang.com/5c19ead20001ca5913990333.jpg

想把这个当做一个模块放到vue实现的页面中,不知该如何做到


摇曳的蔷薇
浏览 6458回答 1
1回答

繁花如伊

类似的第三方插件,都可以用这样的方式组织成一个vue组件:<template><div id="id">&nbsp; &nbsp; <textarea></textarea></div></template><script>import scriptjs from 'scriptjs'export default {&nbsp; &nbsp; props: {&nbsp; &nbsp; &nbsp; &nbsp; id: String&nbsp; &nbsp; },&nbsp; &nbsp; mounted() {&nbsp; &nbsp; &nbsp; &nbsp; // 获取依赖的资源 - 如果需要异步加载的话&nbsp; &nbsp; &nbsp; &nbsp; Promise.all([&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptjs('jquery.min.js'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptjs('editormd.min.js')&nbsp; &nbsp; &nbsp; &nbsp; ])&nbsp; &nbsp; &nbsp; &nbsp; .then(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // do your logic.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 实例化,绑定事件等操作&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; },&nbsp; &nbsp; destoryed() {&nbsp; &nbsp; &nbsp; &nbsp; // 解绑全局事件&nbsp; &nbsp; &nbsp; &nbsp; // 销毁实例&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; // 返回一些有用的函数&nbsp; &nbsp; }}</script>实例化之后,监听实例提供的方法;然后再$emit给使用者,再提供一些get方法用于获取内部属性,等等。具体的实现可以参考vue-ueditor、vue-echarts类似的。使用方法:<editor-md&nbsp;id="editormd"&nbsp;@update="doUpdate"></editor-md>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript