首页 > 数据库 >Vue3+NestJS+Vite4+TS4+Mysql8+Nginx全栈开发企业级管理后台

Vue3+NestJS+Vite4+TS4+Mysql8+Nginx全栈开发企业级管理后台

时间:2024-09-03 10:47:32浏览次数:11  
标签:缓存 表格 Mysql8 企业级 react Nginx 组件 后台 vite

vite打包快的原因:
冷启动
1.esbuild构建依赖,go语言编写多线程打包。
2.原生的esm方式提供源码,浏览器分担了一部分工作。

HMR热更新
1.缓存机制,利用浏览器http头部,源码模块请求根据304协商缓存和依赖模块请求通过强缓存(cache-control: max-age=315360000, public ,immutable)
只是模块本身被更新,不用重新构建。

强弱缓存都是服务器端配置。
强缓存,200 from cache:
Expires
cache-control: max-age=315360000, public ,immutable
弱缓存:
304
3.文件系统缓存:node_modules/.vite目录
vite.config.js中设置缓存:cacheDir:‘./.cache’ //把上面默认的地址修改成这个
禁用缓存,浏览器network/disable cache

服务端写入:
res.setHeader(‘max-age’: ‘3600 public’)
res.setHeader(etag: ‘5c20abbd-e2e8’)
res.setHeader(‘last-modified’: Mon, 24 Dec 2018 09:49:49 GMT)


几款基于vue3和vite的开箱即用的中后台管理模版
几个强大的管理后台模版,并聊聊他们的特点。

  1. Vue vben admin
    在这里插入图片描述
    Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的 vue3, vite2, TypeScript 等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。
    特点
    最新技术栈:使用 Vue3/vite2 等前沿技术
    TypeScript: 应用程序级 JavaScript 的语言
    主题:可配置的主题
    国际化:内置完善的国际化方案
    Mock 数据 内置 Mock 数据方案
    权限 内置完善的动态路由权限生成方案
    组件 二次封装了多个常用的组件

  2. ant-simple-pro
    在这里插入图片描述
    ant-simple-pro 是一款支持 vue3.0,react,angular,typescript 等多框架支持的中台前端解决方案,ui 使用 antd 实现的,它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,响应式设计,开箱即用,而且我们写了很多支持 vue3 的插件和库,它可以帮助你快速搭建企业级中后台产品原型,不管你是 vue 开发者,还是 react 或者 angular,都能在这里找到你想要的版本。
    前序准备
    你需要在本地安装 node 和 git,异步请求数据用axios,所有的异步接口均采用node+typescript+mysql+docker实现的,所以最好先了解如下知识:

vue
vue3.0的新语法,如setup,hooks等合成api
vue-cil,vue-router,vuex等全家桶
react
react基本语法,如hooks,class创建组件,函数式创建组件等
react全家桶要熟悉,如react-router-dom,create-react-app,react-transition-group等
react数据状态库,redux,redux-saga,reselect,react-redux等
react在typescript下的FC模式等
angular
angular的基本语法,如html模板,指令,组件等
angular的全家桶,如angular-cil,Rx等
typescript的基本语法

  1. vue3-template-admin
    在这里插入图片描述
    vue3-template-admin 是一款基于 vue3 + vite + element plus 的后台管理模版,它集成了我们业务开发的大部分功能,比如文本编辑器,全站搜索,权限管理,可视化图表等。
    使用到的插件/库
    eslint-plugin-vue eslint-plugin-vue
    axios 强大的前端请求库
    fues.js fues.js 前端模糊搜索
    echart echart 数据可视化
    antv antv 蚂蚁数据可视化
    xlsx xlsx SheetJS
    jszip jszip 优秀的前端压缩库
    mockjs mockjs 模拟和交互数据
    wangeditor wangeditor 富文本编辑器
    fullcalendar fullcalendar 丰富的日历插件

  2. vue-admin-box
    在这里插入图片描述
    vue-admin-box 是一个免费并且开源的中后台管理系统模板。使用最新版本的 vue3+vite+element-plus 开发而成,目的是为了解决通用型的业务中后台系统复杂的配置。

功能特色
适合中后台开发的路由配置、状态管理机制(状态默认支持本地存储)、已封装完善的axios及api管理机制
极方便扩展的主题配置功能,默认支持三种典型的中后台风格
简易配置的页面缓存功能,只需配置noCache属性,无需配置其他的任何属性,如组件名称,路由名称等等很多框架需要配置的东西
典型增删改查的三种业务表格,详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”
支持缓存页面刷新,目前了解的多数框架都不支持缓存页面的刷新方便扩展的国际化解决方案,并提供了两套非国际化的基础模板和两套国际化的基础模板(ts版本/js版本)
手写版本的各类自定义指令
已经过多个中后台业务检验过的表格公用组件及弹窗公用组件,详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”。

  文章知识点与官方知识档案匹配,可进一步学习相关知识 云原生入门技能树首页概览19945 人正在系统学习中

标签:缓存,表格,Mysql8,企业级,react,Nginx,组件,后台,vite
From: https://www.cnblogs.com/web1123/p/18394129

相关文章

  • 活动火热报名中|搜索进化论:基于大模型的企业级AI搜索
    活动介绍随着人工智能技术的飞速发展,AI搜索正在成为企业提升信息处理效能的重要利器。搜索开发工作台,是阿里云为企业及开发者打造的先进AI搜索平台,具备丰富的组件化服务与强大的模型能力。时间:2024/9/1313:30-17:30地点:阿里巴巴北京朝阳科技园C区,C-C2-B01圆月山庄本次活动中,我们将......
  • nginx部署前端vue项目
    Nginx部署前端Vue项目的技术分析引言在现代Web开发中,Vue.js作为一种流行的前端框架,被广泛应用于构建单页面应用(SPA)。然而,将Vue项目部署到生产环境时,通常需要依赖一个高效的Web服务器来提供服务。Nginx,作为一个高性能的HTTP和反向代理服务器,因其稳定性、易用性和丰富的功能特......
  • nginx服务器如何配置多虚拟站点及其它
    nginx服务器如何配置多虚拟站点,操作如下:1、配置文件目录:除了nginx服务器根目录下的nginx.conf文件外,其它多站点一般配置在目录"conf/vhost"下,演示如下:目录图:目录列表图:站点配置文件以“.conf”为后缀,名称一般按域名来起就可以了,多站点创建不同的.conf文件。2、配置站点,......
  • 基于centos7.5安装mysql8
    @目录环境初始化部署mysql配置主从报错问题解决重启集群操作环境初始化mysql官网下载使用环境VMware17,centos7.5节点IPmysql01192.168.200.20mysql02192.168.200.21初始化两台节点;免密,主机名,主机映射等viinit.sh#!/bin/bash#定义节点信息NODES=("1......
  • nginx的基本使用示例(负载均衡,虚拟主机,动静分离)的详细配置过程
    文章目录前言前置工作httpd主机tomcat主机nginx主机配置负载均衡配置过程效果展示虚拟主机配置过程效果展示动静分离配置过程排除思路前言本篇博客展示nginx的基本使用案例,后端由httpd+tomcat组成,linux版本:rocky9.2虚拟机ipnginx192.168.10.11httpd192.168......
  • Nginx:location、proxy_pass中的斜杠/
    学习自:nginxlocation/区别详解_nginx_脚本之家nginx的location与proxy_pass指令超详细讲解及其有无斜杠(/)结尾的区别_nginxlocation斜杠-CSDN博客nginx的location、root、alias指令用法和区别–蓝队云Nginx系列-5root和alias和index和try_files_nginxrootindex-CSD......
  • Nginx 部署前端 Vue 项目实战指南
    一、环境准备1.安装Nginx首先,需要在服务器上安装Nginx。Nginx是一款轻量级、高性能的HTTP和反向代理服务器。安装方式因操作系统而异。Linux系统(以Ubuntu为例):sudoapt-getupdatesudoapt-getinstallnginxWindows系统:从Nginx官方网站下载安装包,按......
  • nginx-部署windows服务(亲测有效)
    WindowsServiceWrapper(简称winsw)下载winswhttps://repo.jenkins-ci.org/artifactory/releases/com/sun/winsw/winsw/进入链接页面选择对应的版本下载后缀名为net4.exe的文件重命名文件将winsw-2.9.0-net4.exe重命名为nginx-service.exe,并放置到nginx根目录中......
  • nginx 版本升级 转载
    Nginx的版本最开始使用的是Nginx-1.18.0,由于服务升级,需要将Nginx的版本升级到Nginx-1.19.7,要求Nginx不能中断提供服务。为了应对上述的需求,提供两种解决方案:方案1:makeupgrade完成升级方案2:服务信号完成升级nginx版本升级环境说明当前是CentOS7服务器。点击进......
  • Nginx多域名,多证书,多服务配置,实用版
    本文主要讲解在Nginx配置多个域名,多证书,多服务,核心是nginx配置文件。1.情景介绍现在有一个项目,有测试环境和正式环境,已经为两个环境各自申请到域名和ssl证书正式环境域名:xxx.com和www.xxx.com证书:xxx.com_bundle.pem和xxx.com.key测试环境域名:test-xxx.com和......