首页 > 其他分享 >vue-element-admin安装依赖报错问题

vue-element-admin安装依赖报错问题

时间:2023-05-12 10:56:42浏览次数:57  
标签:node vue admin 替换成 tui 报错 editor import

前言

vue-element-admin 中文官网

要使用中文版,直接去git

github下载包:https://github.com/PanJiaChen/vue-element-admin/tree/i18n
gitee下载包:https://gitee.com/panjiachen/vue-element-admin/tree/i18n
分支记得选择这个i18n
image

问题解决

1.修改package.json文件

tui-editor这个包升级换名字了
将 "tui-editor": "1.3.3" 替换成 "@toast-ui/editor": "^3.1.3"
新的Markdown编辑器参考地址:https://nhn.github.io/tui.editor/latest/

2.找到 src/components/MarkdownEditor/index.vue 文件修改代码

1.将 import 'tui-editor/dist/tui-editor.css' 替换成 import '@toast-ui/editor/dist/toastui-editor.css'

2.将 import Editor from 'tui-editor' 替换成 import Editor from '@toast-ui/editor'

3.去掉 import 'tui-editor/dist/tui-editor-contents.css'

4.将所有 editor.getValue 替换成 editor.getMarkdown

5.将所有 editor.setValue 替换成 editor.setMarkdown

6.将 editor.getHtml 替换成 editor.getHTML

7.将 editor.remove() 替换成 editor.destroy()

3.找到src/components/MarkdownEditor/default-options.js 文件修改代码

1.将这个

toolbarItems: [
  'heading','bold','italic','strike','divider',
  'hr','quote','divider',
  'ul','ol','task','indent','outdent','divider',
  'table','image','link','divider',
  'code','codeblock'
]

替换成

toolbarItems: [
  ['heading', 'bold', 'italic', 'strike'], 
  ['hr', 'quote'], 
  ['ul', 'ol', 'task', 'indent', 'outdent'],
  ['table', 'image', 'link'],
  ['code', 'codeblock']
]

4.将 src/views/components-demo/markdown.vue 文件中

'heading','bold','italic'替换成['heading','bold','italic']

5.安装依赖

检查一下自己node的版本

node -v

里面有个包只支持6-17的node版本,超过的话运行就会报错,所以可以降低一下node版本,我使用的16.20.0运行成功了
推荐一下可以使用nvm管理node以及切换node版本很方便
nvm之node的版本管理工具:https://www.cnblogs.com/tn666/p/17028927.html

使用npm安装依赖不行的话换一下淘宝的镜像

查看全局镜像

npm get registry

全局切换淘宝镜像

npm config set registry http://registry.npm.taobao.org/

还不行的话可以换一下 yarn 试试

标签:node,vue,admin,替换成,tui,报错,editor,import
From: https://www.cnblogs.com/tn666/p/17393335.html

相关文章

  • vue中光标显示到指定的input框内
    给input标签内加ref="inputName"然后在想要执行的地方写this.$refs.inputName.focus() 1.如果想要打开这个页面的时让光标自动显示到input框内就在mounted里加 2.如果想在执行事件之后让光标显示到input框内就加在事件里 ......
  • oracle报错:ORA-01034错误:oracle not available 播报文章
    1、ORA-01034错误:oraclenotavailable https://jingyan.baidu.com/article/d8072ac4a016c5ec94cefd72.html 首先先先测试一下,监听是否启动:lsnrctlstatus;如果监听没有启动,则如果监听没起lsnrctlstar,监听启动要将近1分钟的时间。 2连接数据库:connect ......
  • vue中解析转义字符
    最近在写一个后台,后台需要展示富文本的内容,按理说使用v-htmll标签就可以,但是当我使用后,却发现页面展示的依旧是html标签,这时我仔细看了一下返回的富文本内容,发现里边包含了展示转义字符<pstyle="line-height:150%"><spanstyle=";font-family:宋体;line-height:150%;font-size:......
  • VUE
    Vue的基本常识Vue的使用方式vuejs的使用官方提供了2种方式:基于脚本导入使用,下载vue.js文件,通过script标签引入到html网页。基于项目构建工具来进行使用,需要安装项目构建工具,自动构建成一个独立的项目。目前官方推荐的项目构建工具:vue-CLI,vite。Vue调试工具VueDevtools......
  • vue版本报错
     在引入部分加入@2声明是vue2版本即可   ......
  • vue项目中封装localStorage和sessionStorage
    1.为什么需要封装localStorage和sessionStorage?因为封装localStorage和sessionStorage可以提高程序的维护性、可重用性和扩展性,同时也可以使代码更为简单、易懂。2.以下是一个简单的代码封装示例可以新建一个utils目录文件,在该文件下新建storage.js文件进行封装//封装local......
  • mysql:安装phpmyadmin(phpMyAdmin 5.2.1 / PHP 8.2.5 / mysqld 8.0.33)
    一,下载phpmyadmin:官网:https://www.phpmyadmin.net/如图: 注意不同版本的环境需求可以得到下载地址后直接在linux上wget[root@imgphpmyadmin]#wgethttps://files.phpmyadmin.net/phpMyAdmin/5.2.1/phpMyAdmin-5.2.1-all-languages.zip解压:[root@imgphpmyadm......
  • 打开PDB报错ORA-30013
    多租户架构,之前还在做运维的时期接触也不多。遇到多租户问题,第一反应是有些发虚的。但实际很多问题很简单,也容易解决。本文就是一个例子。问题:RAC节点2打开所有PDB时,报错ORA-30013。SQL>alterpluggabledatabaseallopen;alterpluggabledatabaseallopen*ERRORatlin......
  • vue3 setup 父页面调用子组件及子组件调用父页面方法的DEMO
    父页面调用子组件中方法父页面<template><div><!--第四步:页面使用子组件,并添加ref属性,注意ref属性不能和子组件重名--><role-cardref="roleRef"></role-card></div></template><scriptlang="ts"setup>import{ref......
  • ADG无法切换:报错 ORA-16467
    现象:ADG无法切换:验证时就报错ORA-16467记录问题,顺便展现一次troubleshooting的心路历程。具体查询:在主库操作,@primary切换验证:alterdatabaseswitchovertodemoracverify;报错ORA-16467:SQL>alterdatabaseswitchovertodemoracverify;alterdatabaseswitchov......