安装 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依赖照成的

1. 我们可以删除将 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 这四个没有用到，如果解决不了在运行的
  

2. 升级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