Vue Demi
made with Vuejs

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"
  },
}