如何安装和使用 V-Calendar (vue.js)？

Question

我想在我的 Vuetify 应用程序中使用 V-Calendar 库。该应用程序到目前为止运行良好，但不幸的是我没有设法正确安装 V-Calendar 库。

没有显示错误，但网站已停止工作。它变成完全白色，没有任何显示。我关注了V-Calendar Installation。

我尝试了什么：

1. NPM

npm install v-calendar

2。插件文件夹中的 v-calendar.js

• main.js所在文件夹中：新建文件./plugins/v-calendar.js创建

3. v-calendar.js：

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker components
Vue.use(VCalendar);

export default new VCalendar({
});

4. main.js：

...
import VCalendar from './plugins/v-calendar';
...
new Vue({
  router,
  store,
  vuetify,
  VCalendar,
  render: h => h(App)
}).$mount('#app')

编辑 1：

我删除了v-calendar.js。我更新了main.js（参见@pretzelhammer 的回答）。

/views/Home.vue：

<v-date-picker v-model="date" />

export default {
  name: "Home",
  data: () => ({
    date: new Date(),
  }),
};

很遗憾，没有显示日历。 v-calender 有效，但 v-date-picker 无效。

编辑 2：

• 149 个错误：
  • 示例：
    • [Vue 警告]：避免使用非原始值作为键，而是使用字符串/数字值。
    • [Vue 警告]：检测到重复键：“[object Object]”。这可能会导致更新错误。
    • [Vue 警告]：无效的道具：道具“值”的类型检查失败。预期的数组，字符串，得到日期。在 --->
    中找到
    • [Vue 警告]：data() 中的错误：“TypeError：dateString.split 不是函数”。在 --->
    中找到
• 1 警告：
  • [Vuetify] 值必须是字符串，获取日期。在 --->
  中找到

更新编辑 2：

• 我解决了如下两个错误：
  • [Vue 警告]：避免使用非原始值作为键，而是使用字符串/数字值。
  • [Vue 警告]：检测到重复键：“[object Object]”。这可能会导致更新错误。
• 解决方案：

v-for="(item, id) in items" :key="id"

代替：

v-for="item in items" :key="item"

Answer 1

您没有正确遵循说明。您需要做的就是：

1. NPM

npm install v-calendar

2。 main.js

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker components
Vue.use(VCalendar, {
  componentPrefix: 'vc',
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

然后您就可以在任何 Vue 模板中使用 vc-calendar 和 vc-date-picker 组件。