当前位置:首页 > 技术分析 > 正文内容

Vue3 ElementPlus Admin_vue3 elementplus admin如何新增页面

ruisui884个月前 (02-13)技术分析19

Vue3 Element Plus Admin 开箱即用的后管理系统。它基于vue3和element plus 实现。内置了动态路由,i18n国际化,动态权限菜单等功能。

功能

- 登录 / 注销

- 动态路由
- 动态侧边栏(支持多级路由嵌套)
- 动态面包屑
- 快捷导航(标签页)
- 本地/后端 mock 数据
- 組件
  - 富文本
  - Markdown(未完成)
- 表格
  - 动态表格
  - 综合表格
- 错误页面
  - 401
  - 404
- ECharts 图表
- Clipboard(剪贴复制)
- Svg Sprite 图标
- 切换主题色
- i18n国际化
- 系统设置
  - 用户列表
  - 菜单列表
  - 角色列表

目录结构

├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 项目源码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── http                   # http 请求工具
│   ├── icons                  # 项目所有 svg icons
│   ├── i18n                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── plugins                # 插件
│   ├── router                 # 路由
│   ├── store                  # 全局 store 管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件
│   └── bootstrap.js           # 项目初始化
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── babel.config.js            # babel-loader 配置
├── nodemon.json               # 监听 mock 文件变更自动更新
├── vue.config.js              # vue-cli 配置
└── package.json               # package.json

安装

# 克隆项目
git clone https://github.com/TheFirework/vue-element-plus-admin.git

# 进入项目目录
cd vue-element-plus-admin

# 安装依赖
yarn

# 本地开发 启动项目
yarn start

启动完成后会自动打开浏览器访问 http://localhost:8080/



仓库地址
https://github.com/TheFirework/vue-element-plus-admin

如果对你有帮助的话,记得给个star哦

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1921.html

标签: vue路由权限
分享给朋友:

“Vue3 ElementPlus Admin_vue3 elementplus admin如何新增页面” 的相关文章

Linux世界的多样性:yum和apt的对比,让你感受不同发行版的特色

yum和apt是两种常用的Linux软件包管理器,它们都可以用来安装、更新和删除软件包。但是,它们之间也有一些重要的区别,本文将对它们进行分析对比。yum是Yellowdog Updater Modified的缩写,它是基于RPM(Red Hat Package Manager)的软件包管理器,主要...

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title","isShow"], // 2、接收的同时对数据类型进行限制 props:{...

快速上手React

web前端三大主流框架1、Angular大家眼里比较牛的框架,甚至有人说三大框架中只有它能称得上一个完整的框架,因为它包含的东西比较完善,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能。对于刚开始学习使用框架的小伙伴们,可以推荐这个框架,学会之后简直能颠覆之前你对前端开发的认...

抖音 Android 性能优化系列:启动优化实践

启动性能是 APP 使用体验的门面,启动过程耗时较长很可能使用户削减使用 APP 的兴趣,抖音通过对启动性能做劣化实验也验证了其对于业务指标有显著影响。抖音有数亿的日活,启动耗时几百毫秒的增长就可能带来成千上万用户的留存缩减,因此,启动性能的优化成为了抖音 Android 基础技术团队在体验优化方向...

2024年,不断突破的一年

迈凯伦F1车队不久前拿下了2024年度总冠军,距离上一次还是二十几年前。在此期间,另一领域内,一个充满革新活力的腕表品牌——RICHARD MILLE理查米尔,正不断发展,与F1运动、帆船、古董车展等领域,共享着对速度与极限的无尽向往。RICHARD MILLE的发展与F1车手们在赛道上的卓越表现交...

虚幻引擎5.5现已发布 手游开发、动画制作重大改进

Epic在今天发布了虚幻引擎5.5,现可通过Epic Launcher下载。此版本在动画创作、渲染、虚拟制片、移动端游戏开发和开发人员迭代工具集等方面做出了重大改进。 官方博客:虚幻引擎5.5现已发布,在动画创作、虚拟制作和移动游戏开发方面取得了显著进步,渲染、摄像机内视觉特效和开发人员迭代等领域的...