在vue中使用日历组件V-Calendar以及其注意事项

官网: https://vcalendar.io/

安装

# 安装
npm i v-calendar

使用

安装是按照上面的去安装,但要注意的是,使用的时候就不要按照文档的import Calendar from 'v-calendar/lib/components/calendar.umd'去引入使用了.

因为按照上的引用,vue在build的时候不会把这个插件进行编译,然而这里面又是包含es6的代码的,这样就会引起低版本的浏览器打不开网站等bug,所以就需要在vue.config.js里面把这个插件加入要编译的node_modules列表里面

  /**
   *  babel-loader no-ignore node_modules/*
   *  babel-loader 默认忽略node_modules所有依赖不编译,
   *  在这里添加需要编译的依赖模块
   */
  transpileDependencies: ['v-calendar']

然后,把它加进去了之后,就需要用另外一种方式引入这个组件,不然就会报错

import Calendar from 'v-calendar/src/components/Calendar'

接下来就可以以此类推,按照文档的来就可以了

// 声明组件
components: { VCalendar: Calendar },

<!--使用组件-->
<v-calendar></v-calendar>