当前位置: 首页 > news >正文

安装运行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 editor
import '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 <panfree23@gmail.com>","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.org
npm run dev
http://www.lryc.cn/news/192760.html

相关文章:

  • 高数笔记03:几何、物理应用
  • js + selenium 获取chatgpt的accessToken
  • Spring MVC 十一:中文乱码
  • Excel恢复科学技术法显示的数据
  • springboot 志同道合交友网站演示
  • 如何理解BFC、开启BFC、BFC解决哪些问题
  • 3D包容盒子
  • 用 Three.js 创建一个酷炫且真实的地球
  • 【数据结构】线性表与顺序表
  • ChatGPT
  • 矿区井下智慧用电安全监测解决方案
  • 网站列表页加密:三次请求后返回内容多\r
  • 12.JVM
  • 关于网络协议的若干问题(四)
  • opencv图像卷积操作和常用的图像滤波函数
  • 习题1. 31
  • 见微知著:从企业售后技术支持看云计算发展
  • C++笔记之如何给 `const char*` 类型变量赋值
  • 9.Linear Maps
  • 大数据Doris(十):添加BE步骤
  • Vue2 +Element UI 表格行合并
  • SuperEdge易学易用系列-一键搭建SuperEdge集群
  • 农场养殖农产品商城小程序搭建
  • 大语言模型之十七-QA-LoRA
  • UML组件图综合指南:设计清晰、可维护的软件系统
  • 深入浅出ThreadPoolExecutor(一)
  • 网站的常见攻击与防护方法
  • 网络工程师知识点3
  • mongoDB 性能优化
  • 10月13日,每日信息差