Install vue-element-admin, install error resolution

Install vue-element-admin

clone project

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

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

Enter the project directory

cd vue-element-admin

It is recommended not to use cnpm to install, there will be various weird bugs, you can solve the problem of slow npm download speed through the following operations

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

Local Development Startup Project

npm run dev

TIP


strongly recommends not to use cnpm to install directly, there will be various weird bugs, you can solve the problem of slow npm installation by re-specifying the registry. If it still doesn't work, you can use yarn instead of npm.


If the installation is unsuccessful for Windows users, it is very likely that the installation of node-sass failed. Solution.


In addition, because node-sass depends on the python environment, if you have not installed and configured it before, you need to check the relevant installation tutorial by yourself.

npm install installation error

The high probability is due to tui-editorthe dependence

1. We can delete the dependency of tui-editor in package.json, and delete the related usage, that's npm installit

• specific method

  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. upgradetui-editor

• The tui-editor of package.json is changed to "@toast-ui/editor": "^3.1.3", because the package needs to be upgraded
  

• Enter the \src\components\MarkdownEditor\index.vue file

  by this

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

  after modification

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

• Then modify the same default-options.jsleveltoolbarItems

  by this

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

  after modification

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

• Finally, change some operation APIs and modify the name of the new version API, and tui-editor should also be replaced with @toast-ui/editor

  Can search and replace globally

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