vue-element-admin工程搭建及避坑总结

最近公司系统上云，要改造前后端，看见开发都使用vue，所以想了解一下

那就拿vue-element-admin这个工程入手吧~

前提机器里装有nodejs以及git

安装

# 克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录

cd vue-element-admin

# 安装依赖

npm install 或者 npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目

npm run dev

效果如下：

在npm install的过程中遇到了安装tui-editor报错，通过在网上搜索，得到以下解决方案（内容参考互联网）

一、产生原因

---

其实这个问题产生的原因很简单，就是原先的tui-editor插件（富文本编辑器插件）换了个名称，现在已经更名为toast-ui/editor因此安装不了，从而报错！

二、解决方案

---

解决方案其实也很简单，具体如下：

第1步：插件更名

首先将package.json中的tui-editor那一行修改为"@toast-ui/editor": "^3.1.3",

第2步：文件更名

进入\src\components\MarkdownEditor\index.vue文件，将他的所有import删除换成下面四行

复制代码

import 'codemirror/lib/codemirror.css'

import '@toast-ui/editor/dist/toastui-editor.css'

import Editor from '@toast-ui/editor'

import defaultOptions from './default-options'

第3步：方法更名

1）把该页面（还是第二步中的文件）的getValue和setValue分别换成getMarkdown和setMarkdown

第4步：重新安装

重新执行npm install安装依赖就解决了。