❤️作者主页:IT技术分享社区
❤️作者简介:大家好,我是IT技术分享社区的博主,从事C#、Java开发九年,对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。
❤️个人荣誉: 数据库领域优质创作者🏆,华为云享专家🏆,阿里云专家博主🏆
❤️个人博客:IT技术分享社区
❤️公众号/小程序:IT技术分享社区 (运营五年)
❤️好文章点赞 👍 收藏 ⭐再看,养成习惯
1、本地安装node
首先本地安装后nodejs,我本地的版本如下:
PS E:\hgm\vue-admin\vue-element-admin> npm -v6.14.16PS E:\hgm\vue-admin\vue-element-admin> node -vv14.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的完整内容,具体如下:
<template> <div :id="id" /></template><script>// deps for editorimport 'codemirror/lib/codemirror.css' // codemirror// 老版本注释掉//import 'tui-editor/dist/tui-editor.css' // editor ui//import 'tui-editor/dist/tui-editor-contents.css' // editor content//import Editor from '@tui-editor' //替换为新的import '@toast-ui/editor/dist/toastui-editor.css';import Editor from '@toast-ui/vue-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() }, setMarkdown(value) { this.editor.setMarkdown(value) }, getMarkdown() { return this.editor.getMarkdown() }, setHtml(value) { this.editor.setHtml(value) }, getHtml() { return this.editor.getHtml() } }}</script>
修改内容:
导入的包
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、运行效果
登录界面
主界面
版权归原作者 IT技术分享社区 所有, 如有侵权,请联系我们删除。