如何使用Vue-element-admin模板开发一个项目(一)

提示：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，就是上面第一步我提到的多语言版本下载链接;

---

总结

以上主要是从获取源码到部署运行项目的步骤；后续文章会继续记录如何利用此模板开发自己的项目。