提示:npm run dev
前言
记录如何使用Vue-element-admin模板开发自己的项目,一个是为了防止自己下一次学习时忘记之前自己学到的东西,而重复学习浪费了时间;与此同时也是想将自己学习到分享出来,希望能帮到初学者,如果起到了让他们少走些弯路的作用,我所整理的这些也算是值得了。
一、vue-element-admin是什么?
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,它都能帮助到你。参考官方介绍链接
二、使用步骤
1.下载源码
官网介绍的下载源码的方式是通过git,从云端下载,由于是git服务器在国外,网页经常打不开,即使打开了下载也很慢,所以一般都是通过码云网址的镜像地址下载,默认下载的master版本是不含多语言的,所以建议通过此地址下载:多语言版本下载链接;
2.运行程序
1)安装npm
下载完源码之后解压到指定路径;我使用的是VSCode编译器打开程序,终端运行命令:npm install 安装npm脚手架,官网上不建议安装cnpm,所以我也就没有安装;
npm install
安装结果如下图(这个是我第一次完全按照官网步骤部署成功的截图):
如果运行npm install报错了(无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称…),如下图
可能是你没有安装node.js,node.js的下载地址Node.js;
如果是已经安装了,尝试以管理员身份运行“VS Code”;
可能你还会遇到这样一个错误,如下图:
这个可能是由于你没有安装git,或是没有配置好git的环境变量(理论上安装git会自动配置好环境变量);在安装git之后再执行npm install可能依然会报上面的错误,我重启电脑之后再次npm install就可以了;这未必意味着一定要重启,有可能是在我重启电脑之后再次运行的时候网络环境比较好;如果问题依然存在,可以参考此链接再次尝试 解决npm install 出现 undefined ls-remote -h -t ssh://git@github.com/sohee-lee7/Squire.git;
第一次部署成功了,是因为我完全按照官网的操作步骤部署的;后面遇到的两个错误,是我在码云上下载的源码压缩包,然后在新的电脑上部署遇到的,在此之前没有安装node.js,也没有安装git所以会遇到以上两错;有人可能会想问为什么一定安装git呢,这个问题也是我想知道的,如果有哪位晓得,还请评论区告知一下。
2)启动程序
npm run dev
执行截图如下:
运行结果:
有的人可能运行程序之后发现没有切换语言的按钮,那是因为主干的源码没有此功能,需要下载分支i18n,就是上面第一步我提到的多语言版本下载链接;
总结
以上主要是从获取源码到部署运行项目的步骤;后续文章会继续记录如何利用此模板开发自己的项目。