前端:vue-element-admin 搭建踩坑笔记
创始人
2024-04-27 02:28:52
0

❤️作者主页:IT技术分享社区

❤️作者简介:大家好,我是IT技术分享社区的博主,从事C#、Java开发九年,对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。

❤️个人荣誉: 数据库领域优质创作者🏆,华为云享专家🏆,阿里云专家博主🏆 

❤️个人博客:IT技术分享社区

❤️公众号/小程序:IT技术分享社区 (运营五年)

❤️好文章点赞 👍 收藏 ⭐再看,养成习惯

目录

1、本地安装node

2、克隆vue-element-admin项目

3、处理tui-editor依赖报错

找到package.json 去掉 "tui-editor": "1.3.3"

然后执行单独安装tui-editor

4、安装其它依赖包

5、替换使用tui-editor的内容

6、启动项目

7、运行效果


1、本地安装node

首先本地安装后nodejs,我本地的版本如下:

PS E:\hgm\vue-admin\vue-element-admin> npm -v
6.14.16
PS E:\hgm\vue-admin\vue-element-admin> node -v
v14.19.1

配置淘宝镜像

#配置npm为淘宝镜像
npm config set registry https://registry.npm.taobao.org
#查看配置是否正确
npm config get registry

2、克隆vue-element-admin项目

本地新建文件夹,比如E:\\vue-admin 然后执行命令克隆项目

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

克隆之后文档目录如下

3、处理tui-editor依赖报错

找到package.json 去掉 "tui-editor": "1.3.3"

路径:vue-element-admin的根目录

原因:tui-editor(富文本编辑器插件)更名造成的,现在已经改名为toast-ui/editor并且该文件名和方法名都进行可修改,所以需要手动处理。

修改内容如下:

然后执行单独安装tui-editor

因为vue-element-admin项目依赖tui-editor ,手动执行命令安装就行

npm install --save @toast-ui/vue-editor

4、安装其它依赖包

因为依赖包比较多,安装需要几分钟,大家耐心等几分钟。

npm install 

注意:不要使用cnpm命令安装依赖包,会出现各种依赖问题。

5、替换使用tui-editor的内容

路径:E:\vue-admin\vue-element-admin\src\components\MarkdownEditor\index.vue

修改后的index.vue的完整内容,具体如下:


修改内容:

导入的包

import '@toast-ui/editor/dist/toastui-editor.css';
import Editor from '@toast-ui/vue-editor'

index.vue 中方法替换

getValue和setValue分别换成getMarkdown和setMarkdown

6、启动项目

执行启动命令

npm run dev

说明:警告信息不影响正常启动

7、运行效果

登录界面

主界面

相关内容

热门资讯

国海证券:南京中院对金通灵证券... 国海证券12月31日公告,公司作为金通灵科技集团股份有限公司证券虚假陈述责任纠纷案的共同被告之一,收...
思创医惠涉嫌证券违法 已被移送... 12月31日,思创医惠(300078.SZ)发布公告称,公司收到杭州市公安局出具的《移送审查起诉告知...
政策创新显成效!深圳演艺新空间... 12月30日,深圳市演艺新空间发展工作会议召开。会议总结了年度发展成果,通报了2025年度认定与复核...
一项新条例,如何打造“一带一路... 《博尔塔拉蒙古自治州阿拉山口综合保税区管理条例》不仅是一个口岸的升级,更是“一带一路”规则衔接、机制...
光启技术:完善内部管理制度与多... 证券之星消息,光启技术(002625)12月30日在投资者关系平台上答复投资者关心的问题。 投资者提...
公告精选 | 思创医惠涉嫌欺诈... 业绩预告: 孩子王(301078.SZ):预计2025年度归属于上市公司股东的净利润为2.75亿元-...
华西证券:南京中院对金通灵证券... 每经AI快讯,12月31日,华西证券(002926.SZ)公告称,南京中院就金通灵证券虚假陈述责任纠...
佛慈制药:公司享受广告费税前扣... 证券之星消息,佛慈制药(002644)12月31日在投资者关系平台上答复投资者关心的问题。 投资者提...
证监会:支持司法机关依法适用代... 证监会有关部门负责人答记者问。问:沈阳中院于12月19日发布公告,就锦州港证券虚假陈述责任纠纷案件适...
中信出版:不涉及违反外商投资相... 证券之星消息,中信出版(300788)12月30日在投资者关系平台上答复投资者关心的问题。 投资者提...