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版本)
手写版本的各类自定义指令
已经过多个中后台业务检验过的表格公用组件及弹窗公用组件,详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”。

vite打包快几款基于vue3和vite的开箱即用的中后台管理模版相关推荐

  1. 基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 — Soybean Admin开源啦

    ???基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 - Soybean Admin开源啦??? 简介 Soybean Admin 是一个基于 Vue3.Vi ...

  2. 多款非常优秀的基于 vue3.x 、Native UI、TypeScript 的中后台管理系统模板

    前言 今天给大家分享5款开源且非常优秀的基于 vue3.x . Native UI 的中后台管理系统模板,助力大家快速开发一个中后台管理系统 Soybean Admin 简介 Soybean Admi ...

  3. 【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI

    基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI 前言 前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解 ...

  4. 基于Vue3+TS+Vite+Cesium创建项目

    基于Vue3+TS+Vite+Cesium创建项目 基于Vite构建项目 安装配置Cesium 创建Cesium三维视图 运行结果 随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS ...

  5. 开源啦!一款基于Vue3 + Vite + TS的简历制作神器~~

    开源地址 欢迎大家提 issues 和点赞(star)支持! 前言 目前市面上有不少在线制作简历的网站,不得不说,有些做得很好,提供的简历模板非常的漂亮!但是,相信有很多小伙伴不会去使用它们,毕竟贫穷 ...

  6. 基于 vue3.x + vite + element plus,适配手机、平板、pc 的后台开源免费模板库

    介绍 vue-next-admin 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + ...

  7. vue-time-slot 一款基于vue3的会议预约时间组件,时间轴为早7-晚11,可自由选择,并且非常方便。

    vue-time-slot 这款组件是一个会议预约时间的组件,时间轴为早7-晚11,可自由选择 非常便捷,点击确认后会返回一个时间段,首先我们安装 npm install vue3-time-slot ...

  8. web前端期末大作业——基于HTML+CSS+JavaScript蓝色的远程监控设备系统后台管理界面模板

  9. 项目实战:《智慧线上购物商城》:基于vue3+vite+vant4组件(一)

    本项目主要是基于vue3和vite以及vant4组件所开发的移动端购物商城.项目没有接口,所运用的存储数据为json数据通过axios请求,以及Localstorage等技术实现数据. 开发的模型参考 ...

最新文章

  1. freetype 安装
  2. string.Equals 比较2个字符串是否相同忽略大小写
  3. Oracle Minus 取差集
  4. see rebel case 无法越狱_周星驰为什么不拍喜剧,王晶:年纪大了,无法面对自己...
  5. gradle web_简单的Gradle Web应用程序
  6. Log4j,Stat4j,SMTPAppender集成–汇总错误日志以发送太多电子邮件
  7. 图片格式转换大小调整工具_如何轻松快速地将图片转换到JPG/JPEG/PNG/BMP/TIFF
  8. PHP学习之路之在windows7 32位安装wampserver
  9. 朋友的身份证被骗子注册了支付宝开通了花呗,消费了三千被催债才知道花呗被盗如何处理?
  10. vue报错问题记录1-Cannot read property '0' of null
  11. 愚人节就是要搞怪!微信公众号图文应该这样排版!
  12. 同位语从句 vs 定语从句 区别
  13. 如何申请163 VIP邮箱?163 VIP邮箱如何注册登录?
  14. Python——绑定与方法调用
  15. Docker常用基础命令
  16. 小程序社交电商案例分享
  17. 网络七层结构(讲人话)
  18. 2021年新实施的税收优惠政策汇总
  19. c语言bzero函数头文件,嵌入q式c语言-文件操用.doc
  20. 21省人均GDP超过1万美元,北京以19.01万元继续稳居榜首

热门文章

  1. PyQt5的一些组件的介绍
  2. python七巧板绘制图案_p5.js绘制七巧板图案2020-09-02
  3. 分支定界算法在中学排课问题中的应用
  4. matlab 怎么嵌套循环,Matlab嵌套循环
  5. 二零一九第二天 文/一个会写诗的程序员
  6. 你要相信没有到不了的明天
  7. 【图像加密】基于混沌系统进行灰度图像加密附Matlab代码
  8. java mvc设计_javaweb之MVC设计模式
  9. 华中农业大学教务系统自动评教脚本
  10. 解决清华大学校园网自动连接问题