安装运行vue-element-admin的报错问题-解决办法

文章目录

• • 1.第一处
  • 2.第二处
  • 3.安装运行

在使用vue-element-admin时，使用命令安装：

npm install -registry=https://registry.npm.taobao.org

会报错，不通过。需要修改两处。

1.第一处

在目录vue-element-admin-master\src\components\MarkdownEditor下index.vue文件，修改内容如下：

<template><div :id="id" /></template><script>// deps for editorimport 'codemirror/lib/codemirror.css' import '@toast-ui/editor/dist/toastui-editor.css' 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.modeoptions.height = this.heightoptions.language = this.languagereturn 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) returnthis.editor.off('change')this.editor.remove()},setMarkdown(value) {this.editor.setMarkdown(value)},getMarkdown() {return this.editor.getMarkdown()},setHtml(value) {this.editor.setHtml(value)},getHtml() {return this.editor.getHtml()}}}</script>

2.第二处

修改package.json文件：

“tui-editor”: “1.3.3”, 修改为： “@toast-ui/editor”: “^3.1.3”,

{"name": "vue-element-admin","version": "4.4.0","description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features","author": "Pan ","scripts": {"dev": "vue-cli-service serve","lint": "eslint --ext .js,.vue src","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","new": "plop","svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml","test:unit": "jest --clearCache && vue-cli-service test:unit","test:ci": "npm run lint && npm run test:unit"},"dependencies": {"axios": "0.18.1","clipboard": "2.0.4","codemirror": "5.45.0","core-js": "3.6.5","driver.js": "0.9.5","dropzone": "5.5.1","echarts": "4.2.1","element-ui": "2.13.2","file-saver": "2.0.1","fuse.js": "3.4.4","js-cookie": "2.2.0","jsonlint": "1.6.3","jszip": "3.2.1","normalize.css": "7.0.0","nprogress": "0.2.0","path-to-regexp": "2.4.0","screenfull": "4.2.0","script-loader": "0.7.2","sortablejs": "1.8.4","@toast-ui/editor": "^3.1.3","vue": "2.6.10","vue-count-to": "1.0.13","vue-router": "3.0.2","vue-splitpane": "1.0.4","vuedraggable": "2.20.0","vuex": "3.1.0","xlsx": "0.14.1"},"devDependencies": {"@vue/cli-plugin-babel": "4.4.4","@vue/cli-plugin-eslint": "4.4.4","@vue/cli-plugin-unit-jest": "4.4.4","@vue/cli-service": "4.4.4","@vue/test-utils": "1.0.0-beta.29","autoprefixer": "9.5.1","babel-eslint": "10.1.0","babel-jest": "23.6.0","babel-plugin-dynamic-import-node": "2.3.3","chalk": "2.4.2","chokidar": "2.1.5","connect": "3.6.6","eslint": "6.7.2","eslint-plugin-vue": "6.2.2","html-webpack-plugin": "3.2.0","husky": "1.3.1","lint-staged": "8.1.5","mockjs": "1.0.1-beta3","plop": "2.3.0","runjs": "4.3.2","sass": "1.26.2","sass-loader": "8.0.2","script-ext-html-webpack-plugin": "2.1.3","serve-static": "1.13.2","svg-sprite-loader": "4.1.3","svgo": "1.2.0","vue-template-compiler": "2.6.10"},"browserslist": ["> 1%","last 2 versions"],"bugs": {"url": "https://github.com/PanJiaChen/vue-element-admin/issues"},"engines": {"node": ">=8.9","npm": ">= 3.0.0"},"keywords": ["vue","admin","dashboard","element-ui","boilerplate","admin-template","management-system"],"license": "MIT","lint-staged": {"src/**/*.{js,vue}": ["eslint --fix","git add"]},"husky": {"hooks": {"pre-commit": "lint-staged"}},"repository": {"type": "git","url": "git+https://github.com/PanJiaChen/vue-element-admin.git"}}

3.安装运行

在nodejs 16.14.0 32位windows下测试通过。

npm install -registry=https://registry.npm.taobao.orgnpm run dev