Vue Demi
made with Vuejs

Vue Demi

这是一个让你可以开发同时支持Vue2和3的通用Vue库的开发工具。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vue Demi是一个让你可以开发同时支持Vue2和3的通用的Vue库的开发工具,而无需担心用户安装的版本。

当用户要创建一个Vue插件/库时,只需将vue-demi安装为依赖项并将其导入,然后像之前一样发布你的插件/库,用户的软件包就会变得通用。

Vue Demi使用了NPM钩子postinstall。当用户安装所有包后,脚本将开始检查已安装的Vue版本,并根据Vue版本返回对应的代码。在使用Vue 2时,如果没有安装@vue/composition-api,它也会自动安装.

安装

Npm

npm i vue-demi

Yarn

yarn add vue-demi

使用

在依赖中添加vue@vue/composition-api,设置你需要支持的版本:

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

然后,Vue Demi会根据用户环境引入对应的版本(vue@2 + @vue/composition-api 或vue@3):

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

最后,发布你的插件。

额外的API

isVue2 isVue3

import { isVue2, isVue3 } from 'vue-demi'

if (isVue2) {
  // Vue 2 only
} else {
  // Vue 3 only
}

Vue2

为了避免引入所有的树抖动模块,我们提供了一个vue2导出,以支持访问Vue 2的全局API。(见#41)

import { Vue2 } from 'vue-demi'

if (Vue2) {
  Vue2.config.ignoredElements.push('x-foo')
}

install()

Vue 2中的Composition API是作为插件提供的,在使用之前需要安装在Vue实例上。通常,vue-demi会尝试自动安装它。对于可能需要确保插件正确安装的某些用法,在Vue 3环境中,作为Vue.use(CompositionAPI).install()的一个安全版本公开,install()是一个空函数(no-op)。

import { install } from 'vue-demi'

install()

CLI

手动切换版本

要显式切换重定向版本,可以在项目的根中使用这些命令:

npx vue-demi-switch 2
# or
npx vue-demi-switch 3

包别名

如果你想通过别名引入vue,你执行:

npx vue-demi-switch 2 vue2
# or
npx vue-demi-switch 3 vue3

然后vue-demi将从你指定的别名重定向API,例如:

import * as Vue from 'vue3'

var isVue2 = false
var isVue3 = true
var Vue2 = undefined

export * from 'vue3'
export {
  Vue,
  Vue2,
  isVue2,
  isVue3,
}

自动修复

如果postinstall钩子没有被触发,或者您已经更新了Vue版本,请尝试运行以下命令来解决重定向问题。

npx vue-demi-fix

Isomorphic Testings

你可以通过在开发依赖项中添加NPM别名来支持两个版本的测试。例如:

{
  "scripts": {
    "test:2": "vue-demi-switch 2 vue2 && jest",
    "test:3": "vue-demi-switch 3 && jest",
  },
  "devDependencies": {
    "vue": "^3.0.0",
    "vue2": "npm:vue@2"
  },
}

{
  "scripts": {
    "test:2": "vue-demi-switch 2 && jest",
    "test:3": "vue-demi-switch 3 vue3 && jest",
  },
  "devDependencies": {
    "vue": "^2.6.0",
    "vue3": "npm:vue@3"
  },
}
作者

Anthony Fu

@antfu7

相关项目

这是一个类似于Gridster的栅格布局系统, 适用于Vue.js。
这是一个防止页面离开/重新加载组件。
这是一个支持“查看源码”的Vue指令。
这是一个图片显示视差指令。
这是一个Vue Composition API实用程序的集合。
这是一个Webpack打包的监视工具。
这是一个自动UI测试工具。