在vue-nuxt工程中引入mavon-editor

在vue-nuxt工程中引入mavon-editor

在github上获取开源项目时，不少现有的vue工程进行二次开发时是不能直接npm install加入新的安装包的。这里以nuxt工程为例，进行添加mavon-editor组件。

---

对于网上现有的博客，在vue-nuxt工程中引入新的插件，我试用后是不可行的，这里我给出自己的解决方案，如果大家的工程结构和我这个类似，照做的话应该是可行的。

---

---

# 0.工程结构

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、工程结构

二、使用步骤

1.在package-lock.json和package.json工程中添加依赖配置

package-lock.json（示例）：

      "mavon-editor": {
        "version": "2.9.1",
        "resolved": "https://registry.npm.taobao.org/mavon-editor/download/mavon-editor-2.9.1.tgz",
        "integrity": "sha1-Wa3Hy9Ghpx9pHPWyon5g7D5pl8w=",
        "requires": {
          "highlight.js": "^9.11.0",
          "highlight.js-async-webpack": "^1.0.4",
          "xss": "^1.0.6"
        }
      },

package.json（示例）：

        "dependencies": {
		    "axios": "^0.19.2",
		    "echarts": "^5.0.2",
		    "element-ui": "^2.13.0",
		    "mavon-editor": "^2.4.16",
		    "js-cookie": "^2.2.1",
		    "nuxt": "^2.0.0",
		    "vue-awesome-swiper": "^3.1.3",
		    "vue-pdf": "^4.0.12",
		    "vue-qriously": "^1.1.1"
  },

2.nuxt-swiper-plugin.js中引入插件使用

代码如下（示例）：

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

直接引入标签使用。

---

总结

修改配置文件，在nuxt-swiper-plugin.js中进行插件引入，代码中使用，然后执行cnpm i重新安装依赖，或者npm install即可。