虚拟滚动（Virtual Scrolling）是一种优化大型列表渲染性能的技术，在Vue中也有对应的实现方式。虚拟滚动可以提高大量数据列表的性能和响应速度，减少页面的渲染开销。在Vue中实现虚拟滚动的一种常见方式是使用第三方库，比如vue-virtual-scroll-list或vue-virtual-scroll。这些库提供了虚拟滚动的组件或指令，可以方便地将虚拟滚动应用到Vue项目中。以下是使用vue-virtual-scroll-list库实现虚拟滚动的简单示例：1、首先，通过npm或yarn安装vue-virtual-scroll-list库：npm install vue-virtual-scroll-list2、在Vue组件中引入vue-virtual-scroll-list库：                      在上述示例中，VirtualList组件用于包裹需要渲染的大量数据列表，通过设置size属性来指定列表总的数据项数量，remain属性指定要渲染的可见区域内的数据项数量。然后，使用v-for指令遍历items数组，并在每个项上应用样式。通过以上配置，vue-virtual-scroll-list库会根据滚动的位置动态渲染可见区域的数据项，只渲染在视图中可见的数据，而不是将所有数据项都渲染出来，从而提高性能。这只是一个简单的示例，实际应用中可能需要根据具体需求进行配置和调整。你可以根据自己的实际情况选择合适的虚拟滚动库，并根据库的文档进行配置和使用。————————————————版权声明：本文为CSDN博主「软件测试李同学」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_29720657/article/details/131331804  前言 // 呵呵, 1024 发一波 基础知识 的库存  缘于一些 小的需求   因为一些原因 可能到这里就不会再往后面设计了   主要分为了两个版本, html + js 的版本 和 vue 的版本   核心的意义是 面向对象的程序设计   不过是 基于了这种常见的小游戏 展现出来了   关于设计 关于 面向对象的程序设计  内容很多很杂   这里 也不想 一一文字描述, 需要自己去领悟了   具体的 代码实现的设计, 这里 也不多说了, 文字描述有限   整个流程大概如下, 其中第一点至关重要   1. 设计各个对象 Game, Snake, SnakeNode, Arena, WallNode, FoodNode 的各个属性, 以及方法, 方法可以留空, 定义好方法名字就行 2. 实现 Arena 以及 墙体节点, 并绘制 Arena 的整个墙体 3. 实现 食物节点 并绘制食物, 需要按照频率闪烁 4. 实现按键操作 贪吃蛇 的方向, 按空格键暂停游戏  5. 实现 贪吃蛇 触碰到食物之后, 吃掉食物, 贪吃蛇 的长度+1 6. 实现 FoodNode 的随机初始化, 以及吃掉食物之后随机初始化 [需要避开墙体 和 贪吃蛇 占用的节点]   7. 实现贪吃蛇 撞到墙 或者 自己 暂停游戏, 整条蛇闪烁, 标志着游戏结束 8. 拆分整个 H5DrawImage.html 按照对象拆分到各自的 js 9. 增加元素 Grass, Water, Steel     Grass 的特征为可以穿过, 无任何影响     Water 的特征为到 Water 之后不在向前走, 只能左右调整方向     Steel 的特征和墙一样, 碰到之后游戏结束 10. 增加分数的显示, 更新 11. 写一个简单的自动导航贪吃蛇的 "外挂" 12. 将一些配置提取出来, 比如 墙体的长宽, 所有元素节点的宽高, 贪吃蛇的移动频率, 外部导入 "地图" 等等 另外还有一些想法, 因为种种原因 算了, 不想继续再做了   增加道具, 比如 坦克大战的船, 获得船之后, 再规定的时间内可以穿过水   增加 坦克大战的星星, 获得两个之后, 可以撞开 Steel   html + js 版本 主要包含了一个 html 来驱动, 各个对象 js 来处理核心业务   H5DrawImage.html                                     目录：  1. 监听数据变化的实现原理不同  2. 数据流的不同  3. HoC和mixins  4. 组件通信的区别  5. 模板渲染方式的不同  6. 渲染过程不同  7. 框架本质不同  8. 开发过程中  9. 开发应用时  应用场景：  react 和 vue 是我们做前端中必不可少的，一般看公司都在使用什么，你就要用什么，一般规模大的公司都会使用react+ts/react+hook，小公司使用vue2.0多一点，但不是全方面的，那么我们来说说react和vue有什么区别：  1. 监听数据变化的实现原理不同  Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化  React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的 VDOM的重新渲染  2. 数据流的不同  Vue1.0中可以实现两种双向绑定：父子组件之间，props可以双向绑定；组件与DOM 之间可以通过v-model双 向绑定  React一直不支持双向绑定，提倡的是单向数据流，称之为onChange/setState()模式  3. HoC和mixins  Vue组合不同功能的方式是通过mixin，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传 入的对象或者函数  React组合不同功能的方式是通过HoC(高阶组件）  4. 组件通信的区别  React 本身并不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾 向于使用事件  在React中我们都是使用回调函数的，这可能是他们二者最大的区别  5. 模板渲染方式的不同  在表层上，模板的语法不同，React是通过JSX渲染模板；而Vue是通过一种拓展的HTML语法进行渲染  模板的原理不同，React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都 是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的  6. 渲染过程不同  Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要 重新渲染整个组件树  React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可 以进行控制，但Vue将此视为默认的优化  7. 框架本质不同  Vue本质是MVVM框架，由MVC发展而来   React是前端组件化框架，由后端组件化发展而来  8. 开发过程中  vue适合开发小型应用  react适合开发大型应用  9. 开发应用时  vue使用uni-app开发app  react使用 react-Native ———————————————— 版权声明：本文为CSDN博主「樱颜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_58160355/article/details/124544957  一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件  mint-ui - Vue 2的移动UI元素  iview - 基于 Vuejs 的开源 UI 组件库  Keen-UI - 轻量级的基本UI组件合集  vue-material - 通过Vue Material和Vue 2建立精美的app应用  muse-ui - 三端样式一致的响应式 UI 库  vuetify - 为移动而生的Vue JS 2组件框架  vonic - 快速构建移动端单页应用  vue-blu - 帮助你轻松创建web应用  vue-multiselect - Vue.js选择框解决方案  VueCircleMenu - 漂亮的vue圆环菜单  vue-chat - vuejs和vuex及webpack的聊天示例  radon-ui - 快速开发产品的Vue组件库  vue-waterfall - Vue.js的瀑布布局组件  vue-carbon - 基于 vue 开发MD风格的移动端  vue-beauty - 由vue和ant design创建的优美UI组件  bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件  vueAdmin - 基于vuejs2和element的简单的管理员模板  vue-ztree - 用 vue 写的树层级组件  vue-tree - vue树视图组件  vue-tabs - 多tab页轻型框架  二、滚动scroll组件 vue-scroller - Vonic UI的功能性组件  vue-mugen-scroll - 无限滚动组件  vue-infinite-loading - VueJS的无限滚动插件  vue-virtual-scroller - 带任意数目数据的顺畅的滚动  vue-infinite-scroll - VueJS的无限滚动指令  vue-scrollbar - 最简单的滚动区域组件  vue-scroll - vue滚动  vue-pull-to-refresh - Vue2的上拉下拉  mint-loadmore - VueJS的双向下拉刷新组件  vue-smoothscroll - smoothscroll的VueJS版本  三、slider组件 vue-awesome-swiper - vue.js触摸滑动组件  vue-slick - 实现流畅轮播框的vue组件  vue-swipe - VueJS触摸滑块  vue-swiper - 易于使用的滑块组件  vue-images - 显示一组图片的lightbox组件  vue-carousel-3d - VueJS的3D轮播组件  vue-slide - vue轻量级滑动组件  vue-slider - vue 滑动组件  vue-m-carousel - vue 移动端轮播组件  dd-vue-component - 订单来了的公共组件库  vue-easy-slider - Vue 2.x的滑块组件  四、编辑器 markcook - 好看的markdown编辑器  eme - 优雅的Markdown编辑器  vue-syntax-highlight - Sublime Text语法高亮  vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器  Vueditor - 所见即所得的编辑器  vue-html5-editor - html5所见即所得编辑器  vue2-editor - HTML编辑器  vue-simplemde - VueJS的Markdown编辑器组件  vue-quill - vue组件构建quill编辑器  五、图表 vue-table - 简化数据表格  vue-chartjs - vue中的Chartjs的封装  vue-charts - 轻松渲染一个图表  vue-chart - 强大的高速的vue图表解析  vue-highcharts - HighCharts组件  chartjs - Vue Bulma的chartjs组件  vue-chartkick - VueJS一行代码实现优美图表  六、日历 vue-calendar - 日期选择插件  vue-datepicker - 日历和日期选择组件  vue-datetime-picker - 日期时间选择控件  vue2-calendar - 支持lunar和日期事件的日期选择器  vue-fullcalendar - 基于vue.js的全日历组件  vue-datepicker - 漂亮的Vue日期选择器组件  datepicker - 基于flatpickr的时间选择组件  vue2-timepicker - 下拉时间选择器  vue-date-picker - VueJS日期选择器组件  vue-datepicker-simple - 基于vue的日期选择器  七、地址选择 vue-city - 城市选择器  vue-region-picker - 选择中国的省份市和地区  八、地图 vue-amap - 基于Vue 2和高德地图的地图组件  vue-google-maps - 带有双向数据绑定Google地图组件  vue-baidu-map- 基于 Vue 2的百度地图组件库  vue-cmap - Vue China map可视化组件  九、播放器 vue-video-player - VueJS视频及直播播放器  vue-video - Vue.js的HTML5视频播放器  vue-music-master - vue手机端网页音乐播放器  十、文件上传 vue-upload-component - Vuejs文件上传组件  vue-core-image-upload - 轻量级的vue上传插件  vue-dropzone - 用于文件上传的Vue组件  十一、图片处理 vue-lazyload-img - 移动优化的vue图片懒加载插件  vue-image-crop-upload - vue图片剪裁上传组件  vue-svgicon - 创建svg图标组件的工具  vue-img-loader - 图片加载UI组件  vue-image-clip- 基于vue的图像剪辑组件  vue-progressive-image - Vue的渐进图像加载插件  十二、提示 vue-toast-mobile - VueJS的toast插件  vue-msgbox - vuejs的消息框  vue-tooltip - 带绑定信息提示的提示工具  vue-verify-pop - 带气泡提示的vue校验插件  十三、进度条 vue-radial-progress - Vue.js放射性进度条组件  vue-progressbar - vue轻量级进度条  vue2-loading-bar - 最简单的仿Youtube加载条视图  十四、开发框架汇总 vue-admin - Vue管理面板框架  electron-vue - Electron及VueJS快速启动样板  vue-2.0-boilerplate - Vue2单页应用样板  vue-webgulp - 仿VueJS Vue loader示例  vue-bulma - 轻量级高性能MVVM Admin UI框架  vue-spa-template - 前后端分离后的单页应用开发  Framework7-Vue - VueJS与Framework7结合  vue-element-starter - vue启动页  十五、实用库汇总 vuelidate - 简单轻量级的基于模块的Vue.js验证  qingcheng - qingcheng主题  vuex - 专为 Vue.js 应用程序开发的状态管理模式  vue-axios - 将axios整合到VueJS的封装  vue-desktop - 创建管理面板网站的UI库  vue-meta - 管理app的meta信息  avoriaz - VueJS测试实用工具库  vue-framework7 - 结合VueJS使用的Framework7组件  vue-lazy-render - 用于Vue组件的延迟渲染  vue-svg-icon - vue2的可变彩色svg图标方案  vue-online - reactive的在线和离线组件  vue-password-strength-meter - 交互式密码强度计  vuep - 用实时编辑和预览来渲染Vue组件  vue-bootstrap-modal - vue的Bootstrap样式组件  element-admin - 支持 vuecli 的 Element UI 的后台模板  vue-shortkey - 应用于Vue.js的Vue-ShortKey 插件  cleave - 基于cleave.js的Cleave组件  vue-events - 简化事件的VueJS插件  http-vue-loader - 从html及js环境加载vue文件  vue-electron - 将选择的API封装到Vue对象中的插件  vue-router-transition - 页面过渡插件  vuemit - 处理VueJS事件  vue-cordova - Cordova的VueJS插件  vue-qart - 用于qartjs的Vue2指令  vue-websocket - VueJS的Websocket插件  vue-gesture - VueJS的手势事件插件  vue-local-storage - 具有类型支持的Vuejs本地储存插件  lazy-vue - 懒加载图片  vue-lazyloadImg - 图片懒加载插件  vue-bus - VueJS的事件总线  vue-observe-visibility - 当元素在页面上可见或隐藏时检测  vue-notifications - 非阻塞通知库  v-media-query - vue中添加用于配合媒体查询的方法  vuex-shared-mutations - 分享某种Vuex mutations  vue-lazy-component - 懒加载组件或者元素的Vue指令  vue-reactive-storage - vue插件的Reactive层  vue-ts-loader - 在Vue装载机检查脚本  vue-pagination-2 - 简单通用的分页组件  vuex-i18n - 定位插件  Vue.resize - 检测HTML调整大小事件的vue指令  vue-zoombox - 一个高级zoombox  leo-vue-validator - 异步的表单验证组件  modal - Vue Bulma的modal组件  Famous-Vue - Famous库的vue组件  vue-input-autosize - 基于内容自动调整文本输入的大小  vue-file-base64 - 将文件转换为Base64的vue组件  Vue-Easy-Validator - 简单的表单验证  vue-truncate-filter - 截断字符串的VueJS过滤器  十六、服务端 vue-*** - 结合Express使用Vue2服务端渲染  nuxt.js - 用于服务器渲染Vue app的最小化框架  vue-*** - 非常简单的VueJS服务器端渲染模板  vue-easy-renderer - Nodejs服务端渲染  express-vue - 简单的使用服务器端渲染vue.js  十七、辅助工具 DejaVue - Vuejs可视化及压力测试  vue-generate-component - 轻松生成Vue js组件的CLI工具  vscode-VueHelper - 目前vscode最好的vue代码提示插件  vue-play - 展示Vue组件的最小化框架  VuejsStarterKit - vuejs starter套件  vue-multipage-cli - 简单的多页CLI  十八、应用实例 pagekit - 轻量级的CMS建站系统  vuedo - 博客平台  koel - 基于网络的个人音频流媒体服务  CMS-of-Blog - 博客内容管理器  vue-cnode - 重写vue版cnode社区  vue-ghpages-blog - 依赖GitHub Pages无需本地生成的静态博客  swoole-vue-webim - Web版的聊天应用  fewords - 功能极其简单的笔记本  jackblog-vue - 个人博客系统  vue-blog - 使用Vue2.0 和Vuex的vue-blog  vue-dashing-js - nuvo-dashing-js的fork  rss-reader - 简单的rss阅读器  十九、Demo示例 eleme - 高仿饿了么app商家详情  NeteaseCloudWebApp - 高仿网易云音乐的webapp  vue-zhihu-daily - 知乎日报 with Vuejs  Vue-cnodejs - 基于vue重写Cnodejs.org的webapp  vue2-demo - 从零构建vue2 + vue-router + vuex 开发环境  vue-wechat - vue.js开发微信app界面  vue-music - Vue 音乐搜索播放  maizuo - vue/vuex/redux仿卖座网  vue-demo - vue简易留言板  spa-starter-kit - 单页应用启动套件  zhihudaily-vue - 知乎日报web版  douban - 模仿豆瓣前端  vue-Meizi - vue最新实战项目  vue-demo-kugou - vuejs仿写酷狗音乐webapp  vue2.0-taopiaopiao - vue2.0与express构建淘票票页面  node-vue-server-webpack - Node.js+Vue.js+webpack快速开发框架  VueDemo_Sell_Eleme - Vue2高仿饿了么外卖平台  vue-leancloud-blog - 一个前后端完全分离的单页应用  vue-fis3 - 流行开源工具集成demo  mi-by-vue - VueJS仿小米官网  vue-demo-maizuo - 使用Vue2全家桶仿制卖座电影  vue2.x-douban - Vue2实现简易豆瓣电影webApp  vue-adminLte-vue-router - vue和adminLte整合应用  vue-zhihudaily - 知乎日报 Web 版本  Zhihu-Daily-Vue.js - Vuejs单页网页应用  vue-axios-github - 登录拦截登出功能  vue2.x-Cnode - 基于vue全家桶的Cnode社区  hello-vue-django - 使用带有Django的vuejs的样板项目  websocket_chat - 基于vue和websocket的多人在线聊天室  x-blog - 开源的个人blog项目  vue-cnode - vue单页应用demo  vue-express-mongodb - 简单的前后端分离案例  photoShare - 基于图片分享的社交平台  notepad - 本地存储的记事本  vue-zhihudaily-2.0 - 使用Vue2.0+vue-router+vuex创建的zhihudaily  vueBlog - 前后端分离博客  Zhihu_Daily - 基于Vue和Nodejs的Web单页应用  vue-ruby-china - VueJS框架搭建的rubychina平台  vue-koa-demo - 使用Vue2和Koa1的全栈demo  life-app-vue - 使用vue2完成多功能集合到小webapp  vue-trip - vue2做的出行webapp  github-explorer - 寻找最有趣的GitHub库  vue-***-boilerplate - 精简版的ofvue-hackernews-2  vue-bushishiren - 不是诗人应用  houtai - 基于vue和Element的后台管理系统  ios7-vue - 使用vue2.0 vue-router vuex模拟ios7  Framework7-VueJS - 使用移动框架的示例  cnode-vue - 基于vue和vue-router构建的cnodejs web网站SPA  vue-cli-multipage-bootstrap - 将vue官方在线示例整合到组件中  vue-cnode - 用 Vue 做的 CNode 官网  seeMusic - 跨平台云音乐播放器  HyaReader - 移动友好的阅读器  zhihu-daily - 轻松查看知乎日报内容  vue-cnode - 使用cNode社区提供的接口  zhihu-daily-vue - 知乎日报  vue-dropload - 用以测试下拉加载与简单路由  vue-cnode-mobile - 搭建cnode社区  Vuejs-SalePlatform - vuejs搭建的售卖平台demo  vue-memo - 用 vue写的记事本应用  sls-vuex2-demo - vuex2商城购物车demo  v-notes - 简单美观的记事本  vue-starter - VueJs项目的简单启动页  二十、其他实用插件汇总  vue-dragging- 使元素可以拖拽  Vue.Draggable- 实现拖放和视图模型数组同步  vue-picture-input- 移动友好的图片文件输入组件  rubik- 基于Vuejs2的开源 UI 组件库  VueStar- 带星星动画的vue点赞按钮  vue-tables-2- 显示数据的bootstrap样式网格  DataVisualization- 数据可视化  vue-drag-and-drop-list- 创建排序列表的Vue指令  vuwe- 基于微信WeUI所开发的专用于Vue2的组件库  vue-typer- 模拟用户输入选择和删除文本的Vue组件  vue-impression- 移动Vuejs2 UI元素  vue-datatable- 使用Vuejs创建的DataTableView  vue-instant- 轻松创建自动提示的自定义搜索控件  vue-slider-component- 在vue1和vue2中使用滑块  vue-touch-ripple- vuejs的触摸ripple组件  coffeebreak- 实时编辑CSS组件工具  vue-datasource- 创建VueJS动态表格  handsontable- 网页表格组件  vue-bootstrap-table- 可排序可检索的表格  vue-google-signin-button- 导入谷歌登录按钮  vue-float-label- VueJS浮动标签模式  vue-tagsinput- 基于VueJS的标签组件  vue-social-sharing- 社交分享组件  vue-popup-mixin- 用于管理弹出框的遮盖层  cubeex- 包含一套完整的移动UI  vue-fullcalendar- vue FullCalendar封装  vue-material-design- Vue MD风格组件  vue-morris- Vuejs组件封装Morrisjs库  we-vue- Vue2及weui1开发的组件  vue-form-2- 全面的HTML表单管理的解决方案  vue-side-nav- 响应式的侧边导航  mint-indicator- VueJS移动加载指示器插件  vue-ripple- 制作谷歌MD风格涟漪效果的Vue组件  vue-touch-keyboard- VueJS虚拟键盘组件  vue-parallax- 整洁的视觉效果  vue-typewriter- vue组件类型  vue-ios-alertview- iOS7+ 风格的alertview服务  paco-ui-vue- PACOUI的vue组件  vue-button- Vue按钮组件  UI组件 element - 饿了么出品的Vue2的web UI工具套件  Vux - 基于Vue和WeUI的组件库  mint-ui - Vue 2的移动UI元素  iview - 基于 Vuejs 的开源 UI 组件库  Keen-UI - 轻量级的基本UI组件合集  vue-material - 通过Vue Material和Vue 2建立精美的app应用  muse-ui - 三端样式一致的响应式 UI 库  vuetify - 为移动而生的Vue JS 2组件框架  vonic - 快速构建移动端单页应用  eme - 优雅的Markdown编辑器  vue-multiselect - Vue.js选择框解决方案  vue-table - 简化数据表格  VueCircleMenu - 漂亮的vue圆环菜单  vue-chat - vuejs和vuex及webpack的聊天示例  radon-ui - 快速开发产品的Vue组件库  vue-waterfall - Vue.js的瀑布布局组件  vue-carbon - 基于 vue 开发MD风格的移动端  vue-beauty - 由vue和ant design创建的优美UI组件  vue-blu - 帮助你轻松创建web应用  vueAdmin - 基于vuejs2和element的简单的管理员模板  vue-syntax-highlight - Sublime Text语法高亮  vue-infinite-scroll - VueJS的无限滚动指令  Vue.Draggable - 实现拖放和视图模型数组同步  vue-awesome-swiper - vue.js触摸滑动组件  vue-calendar - 日期选择插件  bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件  vue-swipe - VueJS触摸滑块  vue-amap - 基于Vue 2和高德地图的地图组件  vue-chartjs - vue中的Chartjs的封装  vue-datepicker - 日历和日期选择组件  markcook - 好看的markdown编辑器  vue-google-maps - 带有双向数据绑定Google地图组件  vue-progressbar - vue轻量级进度条  vue-picture-input - 移动友好的图片文件输入组件  vue-infinite-loading - VueJS的无限滚动插件  vue-upload-component - Vuejs文件上传组件  vue-datetime-picker - 日期时间选择控件  vue-scroller - Vonic UI的功能性组件  vue2-calendar - 支持lunar和日期事件的日期选择器  vue-video-player - VueJS视频及直播播放器  vue-fullcalendar - 基于vue.js的全日历组件  rubik - 基于Vuejs2的开源 UI 组件库  VueStar - 带星星动画的vue点赞按钮  vue-mugen-scroll - 无限滚动组件  mint-loadmore - VueJS的双向下拉刷新组件  vue-tables-2 - 显示数据的bootstrap样式网格  vue-virtual-scroller - 带任意数目数据的顺畅的滚动  DataVisualization - 数据可视化  vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器  Vueditor - 所见即所得的编辑器  vue-html5-editor - html5所见即所得编辑器  vue-msgbox - vuejs的消息框  vue-slider - vue 滑动组件  vue-core-image-upload - 轻量级的vue上传插件  vue-slide - vue轻量级滑动组件  vue-lazyload-img - 移动优化的vue图片懒加载插件  vue-drag-and-drop-list - 创建排序列表的Vue指令  vue-progressive-image - Vue的渐进图像加载插件  vuwe - 基于微信WeUI所开发的专用于Vue2的组件库  vue-dropzone - 用于文件上传的Vue组件  vue-charts - 轻松渲染一个图表  vue-swiper - 易于使用的滑块组件  vue-images - 显示一组图片的lightbox组件  vue-carousel-3d - VueJS的3D轮播组件  vue-region-picker - 选择中国的省份市和地区  vue-typer - 模拟用户输入选择和删除文本的Vue组件  vue-impression - 移动Vuejs2 UI元素  vue-datatable - 使用Vuejs创建的DataTableView  vue-instant - 轻松创建自动提示的自定义搜索控件  vue-dragging - 使元素可以拖拽  vue-slider-component - 在vue1和vue2中使用滑块  vue2-loading-bar - 最简单的仿Youtube加载条视图  vue-datepicker - 漂亮的Vue日期选择器组件  vue-video - Vue.js的HTML5视频播放器  vue-toast-mobile - VueJS的toast插件  vue-image-crop-upload - vue图片剪裁上传组件  vue-tooltip - 带绑定信息提示的提示工具  vue-highcharts - HighCharts组件  vue-touch-ripple - vuejs的触摸ripple组件  coffeebreak - 实时编辑CSS组件工具  vue-datasource - 创建VueJS动态表格  vue2-timepicker - 下拉时间选择器  vue-date-picker - VueJS日期选择器组件  vue-scrollbar - 最简单的滚动区域组件  vue-quill - vue组件构建quill编辑器  vue-google-signin-button - 导入谷歌登录按钮  vue-svgicon - 创建svg图标组件的工具  vue-float-label - VueJS浮动标签模式  vue-baidu-map - 基于 Vue 2的百度地图组件库  vue-social-sharing - 社交分享组件  vue2-editor - HTML编辑器  vue-tagsinput - 基于VueJS的标签组件  vue-easy-slider - Vue 2.x的滑块组件  datepicker - 基于flatpickr的时间选择组件  vue-chart - 强大的高速的vue图表解析  vue-music-master - vue手机端网页音乐播放器  handsontable - 网页表格组件  vue-simplemde - VueJS的Markdown编辑器组件  vue-popup-mixin - 用于管理弹出框的遮盖层  cubeex - 包含一套完整的移动UI  vue-fullcalendar - vue FullCalendar封装  vue-material-design - Vue MD风格组件  vue-morris - Vuejs组件封装Morrisjs库  we-vue - Vue2及weui1开发的组件  vue-image-clip - 基于vue的图像剪辑组件  vue-bootstrap-table - 可排序可检索的表格  vue-radial-progress - Vue.js放射性进度条组件  vue-slick - 实现流畅轮播框的vue组件  vue-pull-to-refresh - Vue2的上拉下拉  vue-form-2 - 全面的HTML表单管理的解决方案  vue-side-nav - 响应式的侧边导航  mint-indicator - VueJS移动加载指示器插件  chartjs - Vue Bulma的chartjs组件  vue-scroll - vue滚动  vue-ripple - 制作谷歌MD风格涟漪效果的Vue组件  vue-touch-keyboard - VueJS虚拟键盘组件  vue-chartkick - VueJS一行代码实现优美图表  vue-ztree - 用 vue 写的树层级组件  vue-m-carousel - vue 移动端轮播组件  vue-datepicker-simple - 基于vue的日期选择器  vue-tabs - 多tab页轻型框架  vue-verify-pop - 带气泡提示的vue校验插件  vue-parallax - 整洁的视觉效果  vue-img-loader - 图片加载UI组件  vue-typewriter - vue组件类型  vue-smoothscroll - smoothscroll的VueJS版本  vue-city - 城市选择器  vue-tree - vue树视图组件  vue-ios-alertview - iOS7+ 风格的alertview服务  dd-vue-component - 订单来了的公共组件库  paco-ui-vue - PACOUI的vue组件  vue-cmap - Vue China map可视化组件  vue-button - Vue按钮组件  开发框架 vue.js - 流行的轻量高效的前端组件化方案  vue-admin - Vue管理面板框架  electron-vue - Electron及VueJS快速启动样板  vue-2.0-boilerplate - Vue2单页应用样板  vue-spa-template - 前后端分离后的单页应用开发  Framework7-Vue - VueJS与Framework7结合  vue-bulma - 轻量级高性能MVVM Admin UI框架  vue-webgulp - 仿VueJS Vue loader示例  vue-element-starter - vue启动页  实用库 vuex - 专为 Vue.js 应用程序开发的状态管理模式  vuelidate - 简单轻量级的基于模块的Vue.js验证  qingcheng - qingcheng主题  vue-desktop - 创建管理面板网站的UI库  vue-meta - 管理app的meta信息  vue-axios - 将axios整合到VueJS的封装  vue-svg-icon - vue2的可变彩色svg图标方案  avoriaz - VueJS测试实用工具库  vue-framework7 - 结合VueJS使用的Framework7组件  vue-bootstrap-modal - vue的Bootstrap样式组件  vuep - 用实时编辑和预览来渲染Vue组件  vue-online - reactive的在线和离线组件  vue-lazy-render - 用于Vue组件的延迟渲染  vue-password-strength-meter - 交互式密码强度计  element-admin - 支持 vuecli 的 Element UI 的后台模板  vue-electron - 将选择的API封装到Vue对象中的插件  cleave - 基于cleave.js的Cleave组件  vue-events - 简化事件的VueJS插件  vue-shortkey - 应用于Vue.js的Vue-ShortKey 插件  vue-cordova - Cordova的VueJS插件  vue-router-transition - 页面过渡插件  vue-gesture - VueJS的手势事件插件  http-vue-loader - 从html及js环境加载vue文件  vue-qart - 用于qartjs的Vue2指令  vuemit - 处理VueJS事件  vue-websocket - VueJS的Websocket插件  vue-local-storage - 具有类型支持的Vuejs本地储存插件  lazy-vue - 懒加载图片  vue-bus - VueJS的事件总线  vue-reactive-storage - vue插件的Reactive层  vue-notifications - 非阻塞通知库  vue-lazy-component - 懒加载组件或者元素的Vue指令  v-media-query - vue中添加用于配合媒体查询的方法  vue-observe-visibility - 当元素在页面上可见或隐藏时检测  vue-ts-loader - 在Vue装载机检查脚本  vue-pagination-2 - 简单通用的分页组件  vuex-i18n - 定位插件  Vue.resize - 检测HTML调整大小事件的vue指令  vuex-shared-mutations - 分享某种Vuex mutations  vue-file-base64 - 将文件转换为Base64的vue组件  modal - Vue Bulma的modal组件  Famous-Vue - Famous库的vue组件  leo-vue-validator - 异步的表单验证组件  Vue-Easy-Validator - 简单的表单验证  vue-truncate-filter - 截断字符串的VueJS过滤器  vue-zoombox - 一个高级zoombox  vue-input-autosize - 基于内容自动调整文本输入的大小  vue-lazyloadImg - 图片懒加载插件  服务端 nuxt.js - 用于服务器渲染Vue app的最小化框架  express-vue - 简单的使用服务器端渲染vue.js  vue-*** - 非常简单的VueJS服务器端渲染模板  vue-*** - 结合Express使用Vue2服务端渲染  vue-easy-renderer - Nodejs服务端渲染  辅助工具 DejaVue - Vuejs可视化及压力测试  vue-play - 展示Vue组件的最小化框架  vscode-VueHelper - 目前vscode最好的vue代码提示插件  vue-generate-component - 轻松生成Vue js组件的CLI工具  vue-multipage-cli - 简单的多页CLI  VuejsStarterKit - vuejs starter套件  应用实例 koel - 基于网络的个人音频流媒体服务  pagekit - 轻量级的CMS建站系统  vuedo - 博客平台  jackblog-vue - 个人博客系统  vue-cnode - 重写vue版cnode社区  CMS-of-Blog - 博客内容管理器  rss-reader - 简单的rss阅读器  vue-ghpages-blog - 依赖GitHub Pages无需本地生成的静态博客  swoole-vue-webim - Web版的聊天应用  vue-dashing-js - nuvo-dashing-js的fork  fewords - 功能极其简单的笔记本  vue-blog - 使用Vue2.0 和Vuex的vue-blog  Demo示例 Vue-cnodejs - 基于vue重写Cnodejs.org的webapp  NeteaseCloudWebApp - 高仿网易云音乐的webapp  vue-zhihu-daily - 知乎日报 with Vuejs  vue-wechat - vue.js开发微信app界面  vue2-demo - 从零构建vue2 + vue-router + vuex 开发环境  eleme - 高仿饿了么app商家详情  vue-demo - vue简易留言板  maizuo - vue/vuex/redux仿卖座网  spa-starter-kit - 单页应用启动套件  vue-music - Vue 音乐搜索播放  douban - 模仿豆瓣前端  vue-Meizi - vue最新实战项目  zhihudaily-vue - 知乎日报web版  vue-demo-kugou - vuejs仿写酷狗音乐webapp  VueDemo_Sell_Eleme - Vue2高仿饿了么外卖平台  vue2.0-taopiaopiao - vue2.0与express构建淘票票页面  vue-leancloud-blog - 一个前后端完全分离的单页应用  node-vue-server-webpack - Node.js+Vue.js+webpack快速开发框架  mi-by-vue - VueJS仿小米官网  vue-fis3 - 流行开源工具集成demo  vue2.x-douban - Vue2实现简易豆瓣电影webApp  vue-demo-maizuo - 使用Vue2全家桶仿制卖座电影  vue-zhihudaily - 知乎日报 Web 版本  vue-adminLte-vue-router - vue和adminLte整合应用  vue-axios-github - 登录拦截登出功能  Zhihu-Daily-Vue.js - Vuejs单页网页应用  hello-vue-django - 使用带有Django的vuejs的样板项目  vue-cnode - vue单页应用demo  x-blog - 开源的个人blog项目  vue-express-mongodb - 简单的前后端分离案例  websocket_chat - 基于vue和websocket的多人在线聊天室  photoShare - 基于图片分享的社交平台  vue-zhihudaily-2.0 - 使用Vue2.0+vue-router+vuex创建的zhihudaily  notepad - 本地存储的记事本  vueBlog - 前后端分离博客  vue-ruby-china - VueJS框架搭建的rubychina平台  Zhihu_Daily - 基于Vue和Nodejs的Web单页应用  vue-koa-demo - 使用Vue2和Koa1的全栈demo  vue2.x-Cnode - 基于vue全家桶的Cnode社区  life-app-vue - 使用vue2完成多功能集合到小webapp  github-explorer - 寻找最有趣的GitHub库  vue-trip - vue2做的出行webapp  vue-***-boilerplate - 精简版的ofvue-hackernews-2  vue-bushishiren - 不是诗人应用  houtai - 基于vue和Element的后台管理系统  ios7-vue - 使用vue2.0 vue-router vuex模拟ios7  Framework7-VueJS - 使用移动框架的示例  cnode-vue - 基于vue和vue-router构建的cnodejs web网站SPA  vue-cli-multipage-bootstrap - 将vue官方在线示例整合到组件中  vue-cnode - 用 Vue 做的 CNode 官网  HyaReader - 移动友好的阅读器  zhihu-daily - 轻松查看知乎日报内容  seeMusic - 跨平台云音乐播放器  vue-cnode - 使用cNode社区提供的接口  zhihu-daily-vue - 知乎日报  sls-vuex2-demo - vuex2商城购物车demo  vue-dropload - 用以测试下拉加载与简单路由  vue-cnode-mobile - 搭建cnode社区  Vuejs-SalePlatform - vuejs搭建的售卖平台demo  v-notes - 简单美观的记事本  vue-starter - VueJs项目的简单启动页  vue-memo - 用 vue写的记事本应用 ———————————————— 版权声明：本文为CSDN博主「喵不可阉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/beifanggongy/article/details/129661207  Vue虚拟列表（Virtual List）可以在大量数据的场景下，提高页面渲染性能和用户体验。其实现方式是只渲染当前可视区域内的数据部分，而非全部渲染数据，可以通过监听滚动事件，动态计算当前可视区域的起始索引和结束索引，并只渲染这一部分的数据。  简单来说就是在固定数量的dom节点上去对大量的返回数据进行渲染（dom节点具体有多少还是取决于前端列表需要展示的数量），例如，一个列表，需要接收后端返回的10w条数据，此时我们只需要10个dom节点来展示，那么这10w条数据，会根据滚动事件在这10个dom节点上来进行视图层的刷新渲染，从而实现虚拟列表的展示  代码放下面！（下方是组件哈，可以自己引用一下，非常简单）  1. 在模板中        2. 列表组件中，定义如下 props 和 data      props: {       // 列表每一项数据的固定高度       itemHeight: {         type: Number,         required: true,       },       // 列表展示的数据源       items: {         type: Array,         required: true,       },       // 可视区域的高度       viewHeight: {         type: Number,         required: true,       },     },     data() {       return {         // 当前可视区域首位元素的索引         startIndex: 0,         // 当前可视区域末尾元素的索引         endIndex: 0,         // 实际渲染的数据         displayedItems: [],       }     },  3. 组件的mounted和watch钩子中，初始化和更新当前可视区域数据      mounted() {       this.updateVisibleData()       window.addEventListener('scroll', this.updateVisibleData)     },     watch: {       items() {         this.startIndex = 0         this.endIndex = 0         this.updateVisibleData()       },     },     methods: {       // 计算当前可视区域的起始索引和结束索引       updateVisibleData() {         const scrollTop = window.pageYOffset         const visibleHeight = this.viewHeight + scrollTop         const startIndex = Math.floor(scrollTop / this.itemHeight)         const endIndex = Math.ceil(visibleHeight / this.itemHeight)               if (startIndex !== this.startIndex || endIndex !== this.endIndex) {           this.startIndex = startIndex           this.endIndex = endIndex           this.displayedItems = this.items.slice(startIndex, endIndex)         }       },     } ———————————————— 版权声明：本文为CSDN博主「大家都是小菜鸡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/m0_68330110/article/details/130624136   首先解释一下什么是分片上传         分片上传就是把一个大的文件分成若干块，一块一块的传输。这样做的好处可以减少重新上传的开销。比如：如果我们上传的文件是一个很大的文件，那么上传的时间应该会比较久，再加上网络不稳定各种因素的影响，很容易导致传输中断，用户除了重新上传文件外没有其他的办法，但是我们可以使用分片上传来解决这个问题。通过分片上传技术，如果网络传输中断，我们重新选择文件只需要传剩余的分片。而不需要重传整个文件，大大减少了重传的开销。  但是我们要如何选择一个合适的分片呢？因此我们要考虑如下几个事情：  1.分片越小，那么请求肯定越多，开销就越大。因此不能设置太小。  2.分片越大，灵活度就少了。  3.服务器端都会有个固定大小的接收Buffer。分片的大小最好是这个值的整数倍。  分片上传的步骤 1.先对文件进行md5加密。使用md5加密的优点是：可以对文件进行唯一标识，同样可以为后台进行文件完整性校验进行比对。  2.拿到md5值以后，服务器端查询下该文件是否已经上传过，如果已经上传过的话，就不用重新再上传。  3.对大文件进行分片。比如一个100M的文件，我们一个分片是5M的话，那么这个文件可以分20次上传。  4.向后台请求接口，接口里的数据就是我们已经上传过的文件块。(注意：为什么要发这个请求？就是为了能断点续传，比如我们使用百度网盘对吧，网盘里面有续传功能，当一个文件传到一半的时候，突然想下班不想上传了，那么服务器就应该记住我之前上传过的文件块，当我打开电脑重新上传的时候，那么它应该跳过我之前已经上传的文件块。再上传后续的块)。  5.开始对未上传过的文件块进行上传。(这个是第二个请求，会把所有的分片合并，然后上传请求)。  6.上传成功后，服务器会进行文件合并。最后完成。  话不多说，直接开始干代码   文件上传时，会走http-request方法，如果定义了这个方法，组件的submit方法就会被拦截掉（注意别在这个方法里面调用组件的submit 方法，会造成死循环），在这个方法里面我就可以搞我想搞的事情了。  http-request 这个传入的回调函数应该返回一个Promise，所以我自己定义了一个无用的Promise进去  const prom = new Promise((resolve, reject) => {}) prom.abort = () => {} return prom 如果要实现断点续传，需要和后端确定好，如何配合。 我这里的方案是，在我把所有的分片全部上传一遍后，会请求一个查询接口，后端在这个接口里面返回给我哪些分片没有上传成功（会给我序号），我这个时候，再去重新上传那些没有被上传成功的分片  直接贴完整代码，注释都在里面，看不懂的可以直接联系我，博客上有联系方式(依赖element-ui、axios、spark-md5)       更新代码，上面的代码使用md5加密后，与后端加密的MD5值不一样，下面的加密过后是一样的       ———————————————— 版权声明：本文为CSDN博主「yjxkq99」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/yjxkq99/article/details/128942133   van-uploader参考文档 限制上传数量 通过 max-count 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。 限制上传大小 通过 max-size 属性可以限制上传文件的大小，超过大小的文件会被自动过滤，文件信息通过 oversize 事件获取。 文件上传前进行校验和处理 通过before-read 传入函数，可以在上传前进行校验和处理，支持返回 Promise 对 file 对象进行自定义处理。例如压缩图片：使用compressorjs压缩图片，优化功能，压缩所有格式的图片。 文件上传完毕后获取数据 文件上传后会触发 after-read 回调函数，获取到对应的 file 对象。 更多细节请参考vant官方文档      ———————————————— 版权声明：本文为CSDN博主「前端小程」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/CSSAJBQ_/article/details/128012890  Vue.js 是一个流行的 JavaScript 框架，可以用于构建交互式的 Web 应用程序。要在 Vue.js 中使用 v-viewer 插件，您可以按照以下步骤进行操作：安装 v-viewer：您可以使用 npm 或 yarn 安装 v-viewer 插件。使用 npm 进行安装：npm install v-viewer --save或使用 yarn 进行安装：yarn add v-viewer导入和使用 v-viewer：在您的 Vue 组件中，导入 v-viewer 并使用它。// 在您的组件文件中 import Viewer from 'v-viewer'; import 'viewerjs/dist/viewer.css'; export default { // 组件的其他选项 // 在组件中注册 v-viewer mounted() { this.$nextTick(() => { this.initViewer(); methods: { initViewer() { this.$viewer = new Viewer(this.$refs.viewerWrapper); };您需要引入 viewer.css 样式文件，确保 v-viewer 的样式正确加载。在模板中使用 v-viewer：在需要展示图片的模板中，使用 v-for 循环来渲染图片，并使用 ref 添加引用以便在组件中使用。 在上述示例中，images 数组包含了要展示的图片地址。当点击图片时，使用 $viewer.show() 方法来显示图片。以上是在 Vue.js 中使用 v-viewer 的简单示例。您可以根据自己的需求进行进一步的配置和定制。请确保按照 v-viewer 的文档了解更多可用的选项。 京东微前端和阿里微前端都是当前比较流行的微前端框架，它们有各自的优点和特点。下面是对两者进行简要对比的一些关键点：总体架构：京东微前端：京东微前端采用了基于 Web Components 的技术栈，使用自研的微前端框架来进行组织和管理微前端应用。阿里微前端：阿里微前端采用了基于微前端架构飞冰（Ice）的技术栈，使用自研的插件化中台框架来实现微前端的组织和运行。技术栈和生态系统：京东微前端：京东微前端使用了 Web Components 技术，不依赖特定的前端框架，可以与任意前端技术栈集成。它提供了一套完整的解决方案，包括构建、打包、路由、通信等。阿里微前端：阿里微前端基于飞冰（Ice）框架，使用 React 和 Vue 作为主要的前端技术栈。它也提供了一套完整的解决方案，包括构建、打包、路由、通信等，并且有丰富的生态系统和插件可用。生态和社区支持：京东微前端：虽然京东微前端是京东自研的框架，但它在社区中的影响力逐渐增强，受到一些开发者的关注和支持。但它的生态系统相对较小。阿里微前端：阿里微前端基于飞冰（Ice）框架，得到了阿里巴巴集团内众多项目的使用和支持，具有较大的社区和生态系统，有更多的插件和工具可供选择。适用场景和定位：京东微前端：京东微前端定位于构建复杂应用系统的微前端架构，适用于需要将多个独立的前端应用集成在一起的场景。阿里微前端：阿里微前端定位于构建企业级中后台应用的微前端架构，适用于大型系统和组织内部的微服务架构。需要注意的是，以上对比仅是针对一些关键点进行的简要对比，具体选型还需要根据实际需求和具体情况进行综合考虑。对于特定的项目和团队，这些微前端框架都可能是合适的选择。建议在选择之前详细了解它们的特点、文档和使用案例，并根据实际需求进行评估和测试。  canvas是什么？ 一个html5支持的新标签，见名知意，canvas就是画板的意思，可以在canvas上画画。css画三角形很简单，但是要画五角星呢，不妨试试canvas。  在html中使用canvas 1、canvas是html5中的一个标签。 新建一个html。并在body中加入canvas标签。         此时canvas已经显示在画板中，只不过因为和body的颜色一样，所以看不出来。  在head中加入css样式。   这时我们就可以看到canvas了。   2、获取CanvasRenderingContext2D对象用于绘图。 先给canvas一个id属性，   1 获取。   注意，script标签应该在body标签后（至少在canvas标签后），只有在canvas渲染后才能通过JavaScript代码获取到canvas中的CanvasRenderingContext2D对象。          3、使用JavaScript代码进行绘画。  该代码绘制了一条直线。   关于CanvasRenderingContext2D对象更多的绘制方法请参考官方文档。至少现在我们知道canvas是如何使用的了。（一定要注意要在渲染完成后才能通过JavaScript代码获取CanvasRenderingContext2D对象）  在vue3中使用canvas 1、创建vite+vue3项目并运行。 npm init vue@latest 1  2、创建我们的canvas。 这是我们的App.vue文件       创建我们的canvas        3、获取CanvasRenderingContext2D对象并绘制直线。 给canvas标签添加一个ref属性   1 获取canvas对象   渲染完成后获取CanvasRenderingContext2D对象   画一条直线    4、模板       canvas快速入门 绘制折线 一个moveTo配合多个lineTo。可以通过lineWidth设置线宽，还可以设置两个端点和转折处的形状（使用lineCap和lineJoin）  // 使用moveTo,lineTo,lineWidth,lineCap,lineJoin const drawCurvedLine = () => {   ctx.moveTo(100, 100);   ctx.lineTo(400, 100);   ctx.lineTo(100, 400);   ctx.lineTo(400, 400);   ctx.lineCap = 'round';   ctx.lineJoin = 'round';   ctx.stroke(); } 绘制矩形 rect方法以及strokeRect和fillRect。效果等效：strokeRect=rect+stroke，fillRect=rect+stroke。  绘制方式：绘制边框，使用stroke，绘制填充，使用fill。strokeStyle可以设置边框颜色，fillStyle可以设置填充颜色。  // 使用rect,srokeStyle,stroke,fillStyle,fill const drawStrokeRect = () => {   ctx.rect(100, 100, 100, 100);   ctx.strokeStyle = 'green';   ctx.stroke(); }  const drawFillRect = () => {   ctx.rect(300, 100, 100, 100);   ctx.fillStyle = 'blue';   ctx.fill(); } 将绘制一个绿色边框的矩形和蓝色的矩形。然而，当一同调用时，会发现变成了两个一模一样的矩形（绿色边框或者蓝色填充）。  属性作用域：解决上述问题，使用beginPath方法即可。beginPath将后面对于属性的设置隔离开来，以避免覆盖前面的属性。  // 这里还尝试了使用strokeRect和fillRect替代了rect、stroke、fill const drawStrokeRect = () => {     ctx.beginPath();     ctx.strokeStyle='green';     ctx.strokeRect(100,100,100,100); }  const drawFillRect = () => {   ctx.beginPath();   ctx.fillStyle = 'blue';   ctx.fillRect(300, 100, 100, 100); } 绘制弧线 圆圈  ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); 圆弧  ctx.beginPath(); ctx.arc(100,75,50,90/180*Math.PI,2*Math.PI); ctx.stroke(); 扇形  ctx.beginPath(); ctx.moveTo(100,75); ctx.arc(100,75,50,90/180*Math.PI,2*Math.PI); ctx.closePath(); ctx.fill(); 圆环    const RINGWIDTH = 10;    ctx.beginPath();   ctx.arc(100, 75, 90, 0, 2 * Math.PI);   ctx.fill();   ctx.beginPath();   ctx.arc(100, 75, 90-2*RINGWIDTH, 0, 2 * Math.PI);   ctx.fillStyle = 'white';   ctx.fill(); 补充：  如你所见，绘制扇形时使用了closePath，意思是将所有端点连接起来（一般是将终点和起点连接起来，形成一个闭合图形。只有图形闭合时，fill才能生效）。 所有函数的参数不需要单位。（设置字体时，ctx.font=‘40px’，需要带单位，但确实不是函数的参数） 需要角度作为参数时，都是以弧度的形式提供。计算公式，弧度=角度*Math.PI/180。90度，记为90*Math.PI/180。 更多关于画布的使用，可以查看HTML Canvas 参考手册 (w3school.com.cn) ———————————————— 版权声明：本文为CSDN博主「46590928」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_46590928/article/details/127358493   最近在工作中遇到一个需求，就是需要在前端实现一个错误模板Excel的下载功能。  实现下载有两种方式，一种是后端生成一个excel，放在服务器指定目录下，然后前端直接去后端拿。第二种是后端传给前端一个json的list，前端用后端传过来的json的list直接在前端合成一个excel。  第一种：后端生成excel java后端生成excel代码  生成excel工具方法  /** * @author: wu linchun * @creat: 2021-07-29 9:49 * @desc: 将list集合转成Excel文件 * list: 内容list * path: 上传的excel路径 * fileName: 上传的excel名称 **/public static String createExcel(List list, String path, String fileName) {String result = "";if (list.size() == 0 || list == null) {result = "没有对象信息";} else {Object o = list.get(0);Class clazz = o.getClass();String className = clazz.getSimpleName();//这里通过反射获取字段数组Field[] fields = clazz.getDeclaredFields();File folder = new File(path);if (!folder.exists()) {folder.mkdirs();}String name = fileName.concat(".xls");WritableWorkbook book = null;File file = null;try {file = new File(path.concat(File.separator).concat(name));//创建xls文件book = jxl.Workbook.createWorkbook(file);WritableSheet sheet = book.createSheet(className, 0);//列int i = 0;//行int j = 0;for (Field f : fields) {j = 0;//这里把字段名称写入excel第一行中Label label = new Label(i, j, f.getName());sheet.addCell(label);j = 1;for (Object obj : list) {Object temp = getFieldValueByName(f.getName(), obj);String strTemp = "";if (temp != null) {strTemp = temp.toString();}//把每个对象此字段的属性写入这一列excel中sheet.addCell(new Label(i, j, strTemp));j++;}i++;}book.write();result = file.getPath();} catch (Exception e) {// TODO Auto-generated catch blockresult = "SystemException";e.printStackTrace();} finally {fileName = null;name = null;folder = null;file = null;if (book != null) {try {book.close();} catch (WriteException e) {// TODO Auto-generated catch blockresult = "WriteException";e.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blockresult = "IOException";e.printStackTrace();}}}}//最后输出文件路径return result;}  1   下载文件   /** * @author: wu linchun * @creat: 2021-07-29 13:28 * @desc: 下载错误模板 **/@Overridepublic ResponseEntity