安装 vue-element-admin，安装报错解决

news2024/11/23 19:14:19

安装 vue-element-admin

克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git  //(英文的)

git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git // 这个克隆出来是有中英文切换的

进入项目目录

cd vue-element-admin

建议不要用 cnpm 安装会有各种诡异的 bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npmmirror.com

本地开发启动项目

npm run dev

TIP

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。

Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案。

另外因为 node-sass 是依赖 python环境的，如果你之前没有安装和配置过的话，需要自行查看一下相关安装教程。

npm install 安装报错

大概率是由于 tui-editor依赖照成的

我们可以删除将 package.json 中的 tui-editor 的依赖,并将相关使用的删除,就可以npm install了

具体方法

vue-element-admin\package.json //删除 "tui-editor": "1.3.3"
vue-element-admin\src\components //删除 MarkdownEditor 文件夹
vue-element-admin\src\views\components-demo //删除 markdown.vue 文件
vue-element-admin\src\router\modules components.js //删除 {path: 'markdown',...}

//npm cache clean --force
//npm install cnpm
//npm install core-js@3 --save
//cnpm install cross-env 这四个没有用到，如果解决不了在运行的

升级tui-editor

package.json 的 tui-editor 修改为"@toast-ui/editor": “^3.1.3”,因为包要进行升级

进入\src\components\MarkdownEditor\index.vue 文件

由这个

import "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 defaultOptions from "./default-options";

修改后

import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";
import Editor from "@toast-ui/editor";
import defaultOptions from "./default-options";

再修改同级的default-options.js里的toolbarItems

由这个

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"],
];

最后更改一些操作 api 修改新版本 api 名, tui-editor 也要全部替换为@toast-ui/editor

可以全局搜索替换

  this.editor.setValue => this.editor.setMarkdown
  this.editor.getValue => this.editor.getMarkdown
  this.editor.getHtml => this.editor.getHTML
  this.editor.remove => this.editor.destroy