Vue2项目引入litepie-datepicker报Uncaught TypeError错误如何解决

问题原因 #

你遇到的报错是版本不兼容导致的：

• 目前litepie-datepicker v2及以上版本仅适配Vue 3，内部使用了Vue 3独有的composition API相关方法，Vue 2环境下不存在这些方法，因此会抛出Object(...) is not a function的运行时错误。
• 即使你安装了适配Vue 2的1.x版本，如果你的项目Vue版本低于2.7，也会因为缺少内置的composition API支持触发同款报错。

解决方案 #

方案1：安装适配Vue 2的组件版本 #

先卸载当前安装的高版本组件：

npm uninstall litepie-datepicker

再安装适配Vue 2的1.x版本：

npm install litepie-datepicker@1 --save

安装完成后在main.js中放开Vue.use(LitepieDatepicker)的注释即可正常使用。

方案2：Vue 2.6及更早版本额外安装composition API依赖 #

如果你的项目Vue版本≤2.6.14，无法升级到Vue 2.7+，需要先安装@vue/composition-api依赖：

npm install @vue/composition-api --save

然后在main.js中先注册composition API，再注册日期选择器组件：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import LitepieDatepicker from 'litepie-datepicker'

Vue.use(VueCompositionAPI)
Vue.use(LitepieDatepicker)
// 剩余原有代码保持不变

注意事项 #

确保你的项目TailwindCSS版本≥3.0，同时在tailwind.config.js的content配置项中加入litepie-datepicker的组件路径，避免样式丢失：

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/litepie-datepicker/**/*.js'
  ],
  // 其余配置保持不变
}

内容的提问来源于stack exchange，提问作者Xsmael