Vue3 + Element ui  后台管理系统

概述:这是一个用vue3.0和element搭建的后台管理系统界面。

项目git地址: https://github.com/whiskyma/vue3-elementui

技术栈:

  • vue3.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。
  • element ui:基于vue2.0的ui组件库。(本项目中此组件按需加载,减少打包体积大小)。
  • vue-router:一般单页面应用spa都要用到的前端路由。
  • vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
  • axios Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
  • pug pug 是一种前端模板引擎,原名 jade。
  • stylus Stylus是一个CSS预处理器。(为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus)。

本项目网站性能优化点:

  • element ui 各组件按需加载。
  • 开启gzip压缩。 (nginx服务器需要开启,默认未开启)
  • 路由懒加载机制。(可以减少打包之后的包体积,此项目未处理,可自行添加懒加载)

项目截图:

  • 登录页面

  • 表单页面


项目目录结构截图:

项目git地址: https://github.com/whiskyma/vue3-elementui

说明

 如果对您对此项目有兴趣,可以点 "Star" 支持一下 谢谢! ^_^
 
 或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

最后, 如果大家在开发项目的过程中,遇到什么问题评论区见!!!

记得点赞哦

Vue3 + Element ui 后台管理系统的更多相关文章

  1. vue.js + element 搭建后台管理系统 笔记(一)

    此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...

  2. Vue+element搭建后台管理系统-二、安装插件

    我们继续上一章的内容,上一章讲到我们已经能将项目成功跑起来了,那么我们接下来把项目必用的东西完善一下. 一.安装elementUI 终于到了我们的男二了,继续在VSCode中新建一个终端,然后通过这个 ...

  3. vue+element ui后台遇到的坑

    今天在用elementui做后台系统,遇到第一个坑:分页显示的是英文 按照官网组件复制下来的代码: <el-row :gutter="0" style="margi ...

  4. vue3项目后台管理系统模板

    Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性. Performa ...

  5. Vue3教程:Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦

    之前发布过一篇文章<Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统>,文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手 ...

  6. vue3后台管理系统(模板)

    系统简介 此管理系统是基于Vite2和Vue3.0构建生成的后台管理系统.目的在于学习vite和vue3等新技术,以便于后续用于实际开发工作中: 本文章将从管理系统页面布局.vue路由鉴权.vuex状 ...

  7. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  8. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  9. 通用后台管理系统UI模板-AdminLTE简介及构造动态菜单栏

    AdminLTE是一款基于bootstrap的后台管理系统的通用模板UI,它的样式美观且较为符合大多数后台管理系统的需求,典型的上|左右|下的布局形式.并且提供了一整套我们开发的时候可能用到的UI样式 ...

随机推荐

  1. 华为云如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器?

    一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接  华为云如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1.无需下载ap ...

  2. java 多线程的售票问题

    java 多线程的售票问题 对票的库存进行操作 public class Tickets implements Runnable{ private int ticket = 100; public v ...

  3. Cordova iPhone 刘海屏 和 安卓瀑布屏 等异形屏幕的适配处理

    1.  在cordova项目的config.xml中指定StatusBarOverlaysWebView(需要cordova-plugin-statusbar插件支持),表示应用界面是否覆盖状态栏(系 ...

  4. Python操作adb命令脚本

    一.脚本代码(有错误,抓紧改进中) import os import datetime date1=datetime.datetime.now().strftime('%Y%m%d') date2=d ...

  5. springboot+quartz以持久化的方式实现定时任务

    springboot+queue以持久化的方式实现定时任务 篇幅较长,耐心的人总能得到最后的答案 小生第一次用quartz做定时任务,不足之处多多谅解. 首先 在springboot项目里做定时任务是 ...

  6. nrm安装使用(mac)

    在开发工作中时常有需要切换npm源的需求以及更换node版本的情况,这两种情况都有对应的管理器来使用 一.nrm nrm是一个npm源管理工具,使用它可以快速切换npm源. 1.nrm安装(全局安装) ...

  7. Java Web(5)-Servlet详解(上)

    一.Servlet 1. 什么是Servlet Servlet 是 JavaEE 规范之一,规范就是接口 Servlet 就 JavaWeb 三大组件之一,三大组件分别是:Servlet 程序.Fil ...

  8. Blob分析之ball_seq.hdev

    * ball_seq.hdev: Inspection of Ball Bonding * 关闭更新dev_update_off ()*图像集合ImageNames := 'die/' + ['die ...

  9. ZROI 提高十连测 Day1

    第一天的提高模拟测 考前特意睡了20min 还是歇菜了,果然自己菜是真实的. 题目质量海星 但是我都不会这是真的...题目由于是花钱买的这里就不放了 LINK:problem 熟悉我的人应该都知道账号 ...

  10. PV与UV你的网站也可以

    个人博客网站分析 阅读前面的文章,有助于理解本文. 1.是时候来一个个人博客网站了 2.什么?你还没有自己的域名? 3.你的个人博客网站该上线了! 为什么需要流量分析? 各位小伙伴,请看下图,你们发现 ...