vue-demi

简介: vue-demi

事物都是互相妥协的。就是冰山也会时而消融,时而重新凝聚。——爱默生

分享一个vue

https://github.com/vueuse/vue-demi

用来解决编写的代码在vue2vue3之间的兼容问题

安装:

npm i vue-demi

然后修改package.json,将vue@vue/composition-api添加到peerDependencies

{
  "dependencies": {
    "vue-demi": "latest"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0-rc.1",
    "vue": "^2.0.0 || >=3.0.0"
  },
  "peerDependenciesMeta": {
    "@vue/composition-api": {
      "optional": true
    }
  },
  "devDependencies": {
    "vue": "^3.0.0" // or "^2.6.0" base on your preferred working environment
  },
}

使用时,就从vue-demi

import { ref, reactive, defineComponent } from 'vue-demi'

例如这个例子:

https://github.com/vueuse/vue-demi/blob/main/examples/%40vue-demi/use-mouse/src/index.ts

import { ref, onMounted, onUnmounted } from 'vue-demi'
export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = (e: MouseEvent) => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return {
    x,
    y
  }
}
相关文章
|
存储 监控 Kubernetes
『Skywalking』.NET Core快速接入分布式链路追踪平台
📣读完这篇文章里你能收获到 - .NET Core接入Skywalking - 了解Skywalking的整体架构设计 - 了解Skywalking的各项技术指标怎么看 - 生产部署时的坑全跳过 - 感谢点赞+收藏,避免下次找不到~
1338 1
『Skywalking』.NET Core快速接入分布式链路追踪平台
|
2月前
|
人工智能 移动开发 JavaScript
类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡
类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡
420 3
|
缓存 JavaScript
computed/watch深度监听
computed/watch深度监听
404 1
|
资源调度 JavaScript
Vue2拖拽插件(vuedraggable)
这篇文章介绍了如何在Vue 3框架中使用`vuedraggable`插件来实现拖拽功能,并提供了插件的安装、配置和事件处理的示例。
1076 1
Vue2拖拽插件(vuedraggable)
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
833 5
Vue使用element中table组件实现单选一行
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
944 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
|
弹性计算 安全 关系型数据库
使用ECS手动部署MySQL数据库
领取免费云服务器ECS试用资源,快速部署MySQL数据库。
473 1
|
12月前
|
存储 移动开发 JavaScript
vuex的工作流程,模块化使用案例分享,及状态持久化
vuex的工作流程,模块化使用案例分享,及状态持久化
239 0
|
机器学习/深度学习 数据采集 算法
【2021 数学建模“华为杯”】B题:空气质量预报二次建模 2 方案设计附实现代码
2021年数学建模“华为杯”B题的方案设计和实现代码,包括数据预处理、特征选择、聚类算法、气象特征分析以及使用LSTM神经网络进行多变量时间序列预测以实现空气质量预报。
340 0
|
前端开发 定位技术 API
怎么用LarkMap完成地图需求
本文属于技术选型的参考性文章,主要以一个一个的案例分析,来带各位快速的了解到LarkMap能帮助我们完成哪些需求。希望阅读完之后您对LarkMap有一个大致的印象,若后续有地图需求的话,可以考虑使用LarkMap。
602 2