Vue 开发常用组件大集合

680 阅读9分钟

splinetool/runtime

splinetool/runtime 是一个开源的 JavaScript 运行时工具,用于在 Web 浏览器中运行基于 Spline 编辑器创建的交互式3D动画和场景

Spline 是一个可视化的3D创作工具,它允许用户以无代码的方式创建复杂的交互式动画和场景。splinetool/runtime 则是针对 Spline 创建的项目提供的 JavaScript 运行时库。

使用 splinetool/runtime,开发者可以将 Spline 编辑器中创建的项目导出为 JSON 数据格式,并将其嵌入到网页中。然后,通过引入 splinetool/runtime 库,可以在 Web 浏览器中加载和播放这些 Spline 制作的3D动画和场景。

splinetool/runtime 提供了丰富的功能和 API,包括场景的导入和渲染、相机和光照设置、物体的动画和交互、声音效果等。开发者可以使用这些功能和 API 来控制和定制 Spline 制作的3D动画和场景的行为和表现。

总结起来,splinetool/runtime 是用于在 Web 浏览器中运行基于 Spline 编辑器创建的交互式3D动画和场景的 JavaScript 运行时工具。它提供了方便的库和 API,使得开发者能够轻松地在网页中加载、渲染和控制 Spline 制作的3D动画和场景。

微信开发工具

使用微信开发工具搭建微信云开发是指利用微信提供的云开发服务来开发和部署微信小程序或小游戏。

** 微信云开发是基于微信开发者工具提供的一套云端后端服务。**

它允许开发者在小程序或小游戏中使用云数据库、云函数、云存储等功能,无需额外搭建服务器或进行运维管理。开发者可以使用云开发快速开发小程序或小游戏的后端逻辑和数据存储,节省了开发成本和时间。

使用微信开发工具搭建微信云开发包括以下步骤:

  1. 创建小程序或小游戏:在微信开发者工具中创建一个新的小程序或小游戏项目。
  2. 开通云开发:在微信开发者工具中,打开项目设置,找到云开发选项,并按照提示开通云开发服务。
  3. 数据库设置:在云开发控制台中创建数据库,并定义集合和字段结构。
  4. 云函数开发:在云开发控制台中创建和编辑云函数,编写后端逻辑代码。云函数可以用来处理复杂的业务逻辑、调用第三方接口等。
  5. 小程序或小游戏代码开发:在微信开发者工具中编写前端代码,使用云开发提供的 SDK 来调用云数据库、云函数等。
  6. 部署和测试:在微信开发者工具中进行代码的编译、上传和部署。进行测试和调试,确保前端和后端的功能正常工作。

通过搭建微信云开发,开发者可以快速构建小程序或小游戏的全栈应用,实现前端和后端的无缝集成和协作。同时,微信云开发还提供了数据可视化分析、实时推送、访问控制等功能,方便开发者进行应用的监控和管理。

Flyio

lyio 是一个基于 Promise 的轻量级的网络请求库,用于在前端进行网络请求

Flyio 具有以下特点:

  1. 良好的兼容性:Flyio 可以在大部分浏览器和环境中运行,包括浏览器端、Node.js 环境和小程序等。
  2. 简洁的API:Flyio 提供了简洁易用的 API,使得发送网络请求变得简单和直观,支持常用的请求方法,如 GET、POST、PUT、DELETE 等。
  3. 强大的拦截器支持:Flyio 支持请求和响应拦截器,可以在请求发出或响应返回时,对请求和响应进行处理,添加自定义逻辑和处理器。
  4. 支持多种数据格式:Flyio 支持发送和接收多种数据格式,如 JSON、FormData、Buffer 等,方便处理不同类型的请求和响应。
  5. 高性能和高效:Flyio 在性能方面表现出色,具有并发请求、请求取消、超时设置等功能,能够提高请求的效率和稳定性。
  6. 文件上传和下载支持:Flyio 提供文件上传和下载的功能,通过设置请求的 Content-Type 和处理响应的方式,可以方便地进行文件的上传和下载操作。
  7. 配置灵活:Flyio 允许开发者灵活配置请求的超时时间、请求头、拦截器等,使得开发者能够根据实际需求进行定制和扩展。

总的来说,Flyio 是一个简洁、轻量级、高性能的网络请求库,具有拦截器支持、多数据格式处理、文件上传和下载等功能。通过使用 Flyio,开发者可以方便地进行网络请求的发送和处理,提高开发效率和应用性能。

vuex-persistedstate

是一个 Vuex 插件,用于在 Vuex 状态管理中实现持久化存储

在使用 Vuex 管理应用的状态时,每次刷新页面或重新打开应用,状态都会被重置。而 vuex-persistedstate 插件可以帮助我们将 Vuex 的状态持久化到本地存储(如 localStorage 或 sessionStorage),以保持状态的持久性。

@vueuse/core

@vueuse/core 是什么?

@vueuse/core 是一个组合API库,配合vue 使用,在这里是使用它的 useWindowSize 属性,这个属性可以处理 van-swipe 组件的 宽度不自适应问题

van-swipe 是什么?

是一个用于创建可滑动视图的轮播组件。它可以在移动设备或桌面浏览器上实现触摸滑动操作,用于制作轮播图,图片展示或其他需要滑动切换的场景。

useWindowSize 属性

这个属性可以获取设备宽度,动态设置滚动距离,让页面自适应

unplugin-vue-components

“unplugin-vue-components” 是一个能够简化 Vue.js 项目中引入和注册第三方组件库的 Webpack 插件,它提供了灵活的配置和更高的性能,可以帮助你更轻松地管理和使用项目中的组件。

postcss-px-to-viewport

是一个 PostCSS 插件,用于将 CSS 中的像素单位(px)转换为相对于视口宽度的视口单位(vw)。它的主要目的是解决移动端开发中的适配问题。

在移动设备上,不同的屏幕尺寸和分辨率会导致页面的显示效果出现差异。为了解决这个问题,通常需要将 CSS 中使用的像素单位转换为相对单位,以便在不同的设备上自适应地展示内容。

postcss-px-to-viewport 插件通过将 CSS 中的像素值转换为视口单位,实现了根据视口尺寸动态调整元素大小的效果。它通过将像素值除以视口宽度,再乘以 100,得到对应的 vw 值。

使用 postcss-px-to-viewport 插件,在构建过程中可以自动将 CSS 文件中的像素值转换为视口单位,而无需手动计算和修改代码。这样,在不同设备上打开页面时,元素的大小将根据视口尺寸进行自适应调整,以实现更好的适配效果。

以下是 postcss-px-to-viewport 的一些常用配置选项:

  • viewportWidth:视口的宽度,默认为 375px。
  • viewportHeight:视口的高度,默认为 667px。
  • unitPrecision:转换后的视口单位的小数位数,默认为 3。
  • viewportUnit:要转换的视口单位,默认为 vw。
  • selectorBlackList:要忽略转换的选择器列表,默认为空。
  • exclude:要忽略转换的文件路径列表,默认为空。

通过配置这些选项,可以根据具体的项目需求来定制转换规则,从而实现更灵活和精确的单位转换。

normalize.css

normalize.css 是一个 CSS 样式重置库,旨在解决不同浏览器之间的样式差异问题。它通过为浏览器的默认样式提供一套一致的规则,使网页在不同浏览器上具有一致的外观和行为。

不同的浏览器对于 HTML 元素的默认样式和行为有各自的实现,这可能导致网页在不同浏览器间显示的差异。normalize.css 的作用就是通过一系列的 CSS 规则重置这些默认样式,使得网页在各大主流浏览器上呈现一致的效果。

normalize.css 并不是去掉所有的默认样式,而是有选择地修改和重置某些属性,以确保各个浏览器在表现和布局上更加一致。它解决了一些常见的跨浏览器问题,如元素的边距和填充、字体大小和行高、表单元素的样式等。

与其他的 CSS 重置库相比,normalize.css 相对更加轻量级和细粒度,不会造成太大的冲突和覆盖,同时也提供了一套合理的默认样式。它可以作为项目的基础样式,供开发者在此基础上进行样式的定制和扩展。

使用 normalize.css 可以大大减少跨浏览器兼容性的困扰,提高开发效率和一致性。它通常作为一个独立的 CSS 文件引入到项目中,并在其他样式文件之前加载,以确保其样式优先生效。

NProgress

NProgress 是一个轻量级的进度条库,用于在网页加载或异步操作期间显示进度条。它可以提供一个简洁、美观且自定义的进度条,用于增强用户体验和指示当前操作的进度。

NProgress 使用简单,只需在开始加载或开始异步操作时调用 NProgress.start() 方法,进度条就会出现在页面的顶部,并显示加载进度。在加载完成或操作完成后,调用 NProgress.done() 方法,进度条会以动画的方式消失。

NProgress 还提供了一些其他功能和自定义选项,例如:

  • 支持自定义进度条的样式和颜色。
  • 提供了 NProgress.inc() 方法,用于逐渐增加进度。
  • 可以设置进度条显示的最小持续时间和最大速度。
  • 支持在进度条加载期间禁用某些交互功能。

NProgress 的设计目标是简单、可定制和易于集成。它可以与各种前端框架和库一起使用,并且适用于不同类型的网页加载和异步操作场景。无论是在单页面应用中进行路由切换时,还是在发送 AJAX 请求或进行长时间操作时,NProgress 都能帮助你提高用户体验,显示操作的进度。