vue-element-admin--使用体验
原文网址:vue-element-admin--使用体验_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍vue-element-admin的用法。
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助我们快速搭建企业级中后台产品原型。
官网网址
官网:https://panjiachen.gitee.io/vue-element-admin-site/zh/
github: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.github.io/vue-element-admin/#/dashboard
下载并运行
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: 128npm 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
运行
npm run dev
或者用WebStrom打开,然后点击dev:
体验页面
运行后会自动使用默认浏览器打开页面:http://localhost:9527/
直接点击“login”即可:
目录结构
总体结构
- mock: 模拟后端返回结果请求的API,相当于前端自己写的一个伪后台,提供API请求结果。
- node_modules: 依赖类库,相当于我们后端的dependencies 下依赖的各种类库。
- src: 我们开发代码的主要目录
- 环境配置文件
- .env.development:配置开发环境的相关配置包括请求后台的API 基地址,类似后端的application-dev.yml
- .env.production:配置生产环境的相关配置包括请求后台的API 基地址application-prod.yml
- vue.config.js: 配置后台请求基地址和请求代理的地方,因为静态页面和后端代码分离了,涉及到跨域。
- package.json: 可以理解成我们后端的pom.xml ,这里还可以配置JS脚本配置,用来简化执行命令。比如刚才启动使用的npm run dev 等价于npm run vue-cli-service serve
src结构
- api: 前端写Ajax 请求后端API 的地方,这种思想特别好,API与代码分离,管理和复用API就变得方便多了。
- components: 可以复用的前端组件,比如分页,markdown 之类的组件,一般是和业务无关的公用组件。
- router:路由, 简单来讲就是页面的跳转不再是后端在Controller中通过thymeleaf 控制而是前端自己配置怎么跳转。
- views:写前端HTML5页面的地方
- permission.js:由于前后端分离,前端需要自己控制权限拦截。比如登陆页面不拦截,其他页面需要登陆才可以访问
其他网址
3. Vue入门实战教程之vue-element-admin初体验_技术宅星云的博客-CSDN博客_vueelementadmin使用教程
vue-element-admin--使用体验相关推荐
- Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
- vue+element+admin(初始化项目)
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
- vue element admin登录方式切换(密码登录或短信登录)
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
- 后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后 点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
- Vue Element Admin 用mock模块模拟数据
步骤简单 一 在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
- vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
- Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
- Habit-基于JFinal+vue+element的后台通用模板项目
介绍 长期做外包,一直想找个时间整理下一款简单实用的后台管理系统,奈何一直没找到合适的,就花了点时间自己东看看,西凑凑整了一套. 基于JFinal的后台管理系统,采用了简洁强大的JFinal作为web ...
- Vue + Element UI——侧边栏LOGO设计DEMO
GitHub https://github.com/PanJiaChen/vue-element-admin DEMO https://panjiachen.github.io/vue-element ...
- RuoYi Vue - 若依框架的 Vue 版本,免费开源、生态强大、专业的 admin 后台管理系统,基于 Vue + Element
有一段时间没有推荐 admin 框架了,若依这款后台框架很强大,提供了 vue 版本,很实用,推荐给大家. 关于若依 RuoYi 中文名称叫若依,名字十分二次元,是一个后台管理系统,后端基于经典技术组 ...
最新文章
- vsftpd 配置说明
- 渲染管道(3)几何阶段一“概述”
- [知识图谱实战篇] 一.数据抓取之Python3抓取JSON格式的电影实体
- 解决mysql5数据库连接超时问题
- MVC中使用KindEditor
- 006_理解inode
- (java)玩转算法系列-数据结构精讲[学习笔记](一)不要小瞧数组
- Android Toast 设置到屏幕中间,自定义Toast的实现方法,及其说明
- linux救黑砖手机,手机黑砖9006/9008救砖教程 通用救砖模式详细流程
- 让人耳目一新的四款高质量软件,简约又实用,每一款都值得收藏
- c++如何实现以任意数为底的对数(底数合法)log()
- 基于STM32F103的消防系统之火焰传感器
- 睡眠手环APP开发上线
- 澳门--电话正则表达式
- 基于python pyqt的围棋游戏制作
- 手机上传文件到ftp服务器,上传文件到iPhone上的FTP服务器(Upload File to FTP Server on i...
- 【flask】 flask
- httpf发送 json_Java用HttpClient4发送http/https协议get/post请求,发送map,json,xml,txt数据...
- 交互式多模型-扩展卡尔曼滤波IMM-EKF——机动目标跟踪中的应用
- 《廖雪峰Git教程》学习记录
热门文章
- 百度地图4 从0开始
- 免费听歌的音乐播放器,又可以听听青春的味道了
- 内存脏数据下刷(linux2.6.18/linux.2.6.32)剖析
- Mogafx英镑预测
- vim移动、定位命令与快捷键速查表(简练通俗)
- Flink Timeout of 60000ms expired before the position for partition
- 我决定,开hard模式
- 2019年参加 PMP 认证考试了,通过的人心得分享
- 应用上K8S:K8S集成Java应用
- k8s使用(kubernetes)