vue-element-admin 项目从Github下载之后该怎么运行？

阳光穿透心脏的1/2处 2022-12-21 00:45 116阅读 0赞

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：star:55k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

![b6345aacebb7bafb30ea20bb68ccd962.png][]

今天就来说一下，怎使用这个模板，以及写好了项目，怎么样把项目打包成静态文件，部署在服务器上。

1：去github上面下载或者克隆  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
我这里使用简单粗暴的方式，直接下点击载按钮

![6c42a059b3b103b70cb1d730ac65caf5.png][]

image

2：把项目导入vscode，点开终端，并且在项目里面安装依赖。

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

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

![77b65d492b4868ea499f17d0ceab15d8.png][]

安装完成会发现项目目录中多了一个依赖文件夹

![a8b3d4203077b7363b6c4b00ef806538.png][]

image

3：运行本地开发 启动项目

npm run dev

![5272b7a004cb5dd0c72cb54821d6ec78.png][]

image

4：浏览器打开  
运行成功就使用浏览器打开[http://localhost:9527/][http_localhost_9527]

![b0221a4380ded43c794c3e90a204e48f.png][]

image

可以在这个后台管理系统的模板的基础上，修改一些自己需要的代码，变成自己的开发的项目了，此处自行发挥，省略一万字。

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[b6345aacebb7bafb30ea20bb68ccd962.png]: /images/20221120/ac53ea0d60344683a6f118bbf0de8143.png
[6c42a059b3b103b70cb1d730ac65caf5.png]: /images/20221120/9fc83fccb80e45d69461478cf68d92fa.png
[77b65d492b4868ea499f17d0ceab15d8.png]: /images/20221120/aa6a19a320c04cdc95d6846690aea58e.png
[a8b3d4203077b7363b6c4b00ef806538.png]: /images/20221120/ef9099f7e9bd48caa740bba2df33c8d5.png
[5272b7a004cb5dd0c72cb54821d6ec78.png]: /images/20221120/cb16ed2edac54101acefb68dd7af9e7e.png
[http_localhost_9527]: https://links.jianshu.com/go?to=http%3A%2F%2Flocalhost%3A9527%2F
[b0221a4380ded43c794c3e90a204e48f.png]: /images/20221120/98831f33a12c4c6999337490087aa129.png