在vue中使用日歷組件V-Calendar以及其注意事項(xiàng)

官網(wǎng): https://vcalendar.io/

安裝

# 安裝
npm i v-calendar

使用

安裝是按照上面的去安裝,但要注意的是,使用的時(shí)候就不要按照文檔的import Calendar from 'v-calendar/lib/components/calendar.umd'去引入使用了.

因?yàn)榘凑丈系囊?vue在build的時(shí)候不會(huì)把這個(gè)插件進(jìn)行編譯,然而這里面又是包含es6的代碼的,這樣就會(huì)引起低版本的瀏覽器打不開(kāi)網(wǎng)站等bug,所以就需要在vue.config.js里面把這個(gè)插件加入要編譯的node_modules列表里面

  /**
   *  babel-loader no-ignore node_modules/*
   *  babel-loader 默認(rèn)忽略node_modules所有依賴(lài)不編譯,
   *  在這里添加需要編譯的依賴(lài)模塊
   */
  transpileDependencies: ['v-calendar']

然后,把它加進(jìn)去了之后,就需要用另外一種方式引入這個(gè)組件,不然就會(huì)報(bào)錯(cuò)

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

接下來(lái)就可以以此類(lèi)推,按照文檔的來(lái)就可以了

// 聲明組件
components: { VCalendar: Calendar },

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