vue-element-admin--使用体验

我不是女神ヾ 2023-09-28 11:51 5阅读 0赞

原文网址：[vue-element-admin--使用体验\_IT利刃出鞘的博客-CSDN博客][vue-element-admin--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍vue-element-admin的用法。

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助我们快速搭建企业级中后台产品原型。

**官网网址**

官网：[https://panjiachen.gitee.io/vue-element-admin-site/zh/][https_panjiachen.gitee.io_vue-element-admin-site_zh]

github：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]

**最佳实践**

vue-element-admin的最佳实践：把 vue-element-admin当做工具箱或者集成方案仓库，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

vue-element-admin的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

**体验网址**

如果想先体验下的话，vue-element-admin官方提供了两个在线预览版本。

国内用户可访问：[https://panjiachen.gitee.io/vue-element-admin/\#/dashboard][https_panjiachen.gitee.io_vue-element-admin_dashboard]

国外用户可访问：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

![8569375a5aba412bb7e47deeeff5d85e.png][]

## 下载并运行 ##

**1.下载源码**

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

如果下载慢，可以用这个：

git clone https://gitee.com/panjiachen/vue-element-admin.git

**2.下载依赖**

进入项目目录

cd vue-element-admin

下载依赖

npm install --registry http://registry.npmmirror.com

**问题解决**

下载依赖可能会报错：

> npm ERR! github.com\[0: 20.205.243.166\]: errno=No such file or directory  
> npm ERR!  
> npm ERR!  
> npm ERR! exited with error code: 128
> 
> npm ERR! A complete log of this run can be found in:  
> npm ERR! E:\\work\\npm\\node\_cache\\\_logs\\2022-06-03T00\_25\_44\_783Z-debug.log

解决方案见：[git--解决exited with error code: 128\_IT利刃出鞘的博客-CSDN博客\_git错误码128][git--_exited with error code_ 128_IT_-CSDN_git_128]

## 运行 ##

npm run dev

或者用WebStrom打开，然后点击dev：

![e549e8e95b374550aacb01d60ad2d92c.png][]

## 体验页面 ##

运行后会自动使用默认浏览器打开页面：[http://localhost:9527/][http_localhost_9527]

![b29f8acf265345ef9a89657b139eae19.png][]

直接点击“login”即可：

![dea612049f9a4d9d9c6d00df10be56cb.png][]

## 目录结构 ##

### 总体结构 ###

![63d4d96317cb4a8a86d1031e16cc56cc.png][]

1.  mock: 模拟后端返回结果请求的API，相当于前端自己写的一个伪后台，提供API请求结果。
2.  node\_modules: 依赖类库，相当于我们后端的dependencies 下依赖的各种类库。
3.  src: 我们开发代码的主要目录
4.  环境配置文件
    
    1.  .env.development:配置开发环境的相关配置包括请求后台的API 基地址,类似后端的application-dev.yml
    2.  .env.production:配置生产环境的相关配置包括请求后台的API 基地址application-prod.yml
5.  vue.config.js: 配置后台请求基地址和请求代理的地方，因为静态页面和后端代码分离了，涉及到跨域。
6.  package.json: 可以理解成我们后端的pom.xml ，这里还可以配置JS脚本配置，用来简化执行命令。比如刚才启动使用的npm run dev 等价于npm run vue-cli-service serve

### src结构 ###

![344deefa18504a13929043593b3ed6f9.png][]

1.  api: 前端写Ajax 请求后端API 的地方，这种思想特别好，API与代码分离，管理和复用API就变得方便多了。
2.  components: 可以复用的前端组件，比如分页，markdown 之类的组件，一般是和业务无关的公用组件。
3.  router:路由, 简单来讲就是页面的跳转不再是后端在Controller中通过thymeleaf 控制而是前端自己配置怎么跳转。
4.  views：写前端HTML5页面的地方
5.  permission.js：由于前后端分离，前端需要自己控制权限拦截。比如登陆页面不拦截，其他页面需要登陆才可以访问

## 其他网址 ##

[3. Vue入门实战教程之vue-element-admin初体验\_技术宅星云的博客-CSDN博客\_vueelementadmin使用教程][3. Vue_vue-element-admin_-CSDN_vueelementadmin]

[vue-element-admin--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125418229
[https_panjiachen.gitee.io_vue-element-admin-site_zh]: https://panjiachen.github.io/vue-element-admin-site/zh/
[https_github.com_PanJiaChen_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[https_panjiachen.gitee.io_vue-element-admin_dashboard]: https://panjiachen.gitee.io/vue-element-admin/#/dashboard
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://panjiachen.github.io/vue-element-admin/#/dashboard
[8569375a5aba412bb7e47deeeff5d85e.png]: https://img-blog.csdnimg.cn/8569375a5aba412bb7e47deeeff5d85e.png
[git--_exited with error code_ 128_IT_-CSDN_git_128]: https://knife.blog.csdn.net/article/details/125110320
[e549e8e95b374550aacb01d60ad2d92c.png]: https://img-blog.csdnimg.cn/e549e8e95b374550aacb01d60ad2d92c.png
[http_localhost_9527]: http://localhost:9527/
[b29f8acf265345ef9a89657b139eae19.png]: https://img-blog.csdnimg.cn/b29f8acf265345ef9a89657b139eae19.png
[dea612049f9a4d9d9c6d00df10be56cb.png]: https://img-blog.csdnimg.cn/dea612049f9a4d9d9c6d00df10be56cb.png
[63d4d96317cb4a8a86d1031e16cc56cc.png]: https://img-blog.csdnimg.cn/63d4d96317cb4a8a86d1031e16cc56cc.png
[344deefa18504a13929043593b3ed6f9.png]: https://img-blog.csdnimg.cn/344deefa18504a13929043593b3ed6f9.png
[3. Vue_vue-element-admin_-CSDN_vueelementadmin]: https://blog.csdn.net/hadues/article/details/107441635