vue-element-admin依赖安装失败

克隆vue-element-admin后npm i下载依赖失败

使用npm，cnpm，yarn下载依赖都会失败，cnpm的报错信息可能更详细一些，会提示是由哪个包造成的

下载失败的原因是由一个叫做tui-editor的包引起的。

---

通过查看官方文档，发现这个包需要换成另外一个包@toast-ui/editor,可能是package.json没有及时更新，上次更新时间是20年

具体解决方法有以下两种：

1.删除MarkdownEditor组件

将package.json中的tui-editor删除，将/src/components/MarkdownEditor删除，将/views/components-demo/markdown.vue删除，然后npm i安装依赖，npm run dev启动项目即可。

2.如果希望保留MarkdownEditor组件的话（markdown编辑器）,可以参考以下方法

将/src/components/MarkdownEditor/index.vue中的内容改为以下(需要改一些小细节，可以直接粘下面的):

<template>
  <div :id="id"></div>
</template>

<script>
import 'codemirror/lib/codemirror.css' // Editor's Dependency Style
import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
import Editor from '@toast-ui/editor'
import defaultOptions from './default-options'

export default {
  name: 'MarkdownEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: false,
      default() {
        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    options: {
      type: Object,
      default() {
        return defaultOptions
      }
    },
    mode: {
      type: String,
      default: 'markdown'
    },
    height: {
      type: String,
      required: false,
      default: '300px'
    },
    language: {
      type: String,
      required: false,
      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
    }
  },
  data() {
    return {
      editor: null
    }
  },
  computed: {
    editorOptions() {
      const options = Object.assign({}, defaultOptions, this.options)
      options.initialEditType = this.mode
      options.height = this.height
      options.language = this.language
      return options
    }
  },
  watch: {
    value(newValue, preValue) {
      if (newValue !== preValue && newValue !== this.editor.getMarkdown()) {
        this.editor.setMarkdown(newValue)
      }
    },
    language(val) {
      this.destroyEditor()
      this.initEditor()
    },
    height(newValue) {
      this.editor.height(newValue)
    },
    mode(newValue) {
      this.editor.changeMode(newValue)
    }
  },
  mounted() {
    this.initEditor()
  },
  destroyed() {
    this.destroyEditor()
  },
  methods: {
    initEditor() {
      this.editor = new Editor({
        el: document.getElementById(this.id),
        ...this.editorOptions
      })
      if (this.value) {
        this.editor.setMarkdown(this.value)
      }
      this.editor.on('change', () => {
        this.$emit('input', this.editor.getMarkdown())
      })
    },
    destroyEditor() {
      if (!this.editor) return
      this.editor.off('change')
      this.editor.remove()
    },
    setValue(value) {
      this.editor.setMarkdown(value)
    },
    getValue() {
      return this.editor.getMarkdown()
    },
    setHtml(value) {
      this.editor.setHtml(value)
    },
    getHtml() {
      return this.editor.getHtml()
    }
  }
}
</script>

先安装@toast-ui/editor(安装2.0中较稳定的版本)

npm i @toast-ui/editor@2

然后npm i 安装依赖

安装完之后npm run dev项目就可以跑起来了

完结撒花 *⸜( •ᴗ• )⸝*

有问题联系我