前段时间了解了一下vue-element-admin,按着官网搭建了一下,踩了不少坑,有时间就记录下来,方便以后用到了可以在看看。
下面我讲的是用git克隆的方法,当然你也可以直接在github上下载。
由于好多朋友可能搭出来后还是会有一些奇奇怪怪的bug,所以这边附上我自己搭建成功的项目,代码下载
vue-element-admin
一、搭建项目的前提条件
1.克隆vue-element-admin需要用到git,如果没有安装git,命令会报错
(1)git下载地址:下载地址,下载比较慢
(2)下载完后直接下一步下一步安装即可
(3)安装完成后,cmd命令行输入:git -v 或 git --version可以查看版本, 效果如下图所示:
2.vue项目的话,肯定要安装搭建vue环境
(1)安装node.js,下载地址:下载 | Node.js 中文网
(2)下载完成后,直接下一步下一步安装即可,安装完成后,cmd中输入node -v和npm -v查看版本
(3)安装淘宝镜像: npm install --registry=https://registry.npm.taobao.org
二、搭建:vue-element-admin,照着官网介绍,一步步搭建即可
1.克隆项目:
注:这边官网中的克隆克隆出来的是英文版的,想要中文版,就要克隆中文版的,下面第一个是英文版,第二个是中文版
git clone https://github.com/PanJiaChen/vue-element-admin.git // 这个克隆出来是英文的
git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git // 这个克隆出来是有中英文切换的
(1)首先,我新建了一个文件夹,打开文件夹,按住shift+鼠标右键,弹框会显示一条“在此处打开Powershell窗口”,点击会弹出命令框
(2)输入命令行,这个过程稍微有点慢,而且我前面克隆了好几次,都失败了,后面过了好久才成功的,需要耐心等待
(3)最终克隆成功的后的效果如下图:命令执行完成到100%,文件夹也会成功的多出一个vue-element-admin的文件夹
(4)点击打开文件夹,可以看到如下,一个搭建好的项目结构
2.进入项目目录:
cd vue-element-admin
3.安装依赖
npm install
npm install --registry=https://registry.npm.taobao.org
此处安装依赖时一直报错,如下图所示:
最后查到解决方法
将package.json中的 tui-editor删掉即可<我自己是直接删除的>
后期下方评论区有大佬给出一个解决办法,我这边没有尝试,如果有人想尝试也可以试试:点击进入
删掉后重新安装依赖,又报错缓存有问题,报错内容没有截图,可能是因为之前一直npm install一直报错造成了什么缓存吧
解决方法,输入以下命令
npm cache clean --force
到此依赖总算是安装成功了
4.本地开发,启动项目
npm run dev
本以为此时此刻成功已经在我眼前了,只要启动一下就可以看到页面了,结果,,,,又,,,,报错了
在组件中将富文本编辑器删掉
删掉之后跑,还是报错:
然后找的markdown.vue将其删掉
后面跑,还是报错,在找的路由地址,删掉:
然后,然后,然后,然后,,,,,,,终于跑出来了,效果如下图所示: