vue项目引入vue-calendar-component组件启动项目报错Clock is not defined

分手后的思念是犯贱 2023-02-26 05:24 0阅读 0赞

`vue-calendar-component` vue 日历组件，本次使用场景用于查询签到详情，对于最近6个月内的签到详情使用日历进行展示。  
[vue-calendar-component的GitHub详解][vue-calendar-component_GitHub]  
vue项目引入组件后，有的项目启动后不会出现任何问题，有的项目启动后可能会出现此问题，具体视情况而定。

### 报错的解决方案 ###

在 `node_modules` 目录中找到 `vue-calendar-component`， 将`src`文件单独拿出，然后自己封装成可用的组件，简单点就是将这三个文件拿出放到自己的`compments`里  
![calendar][]  
然后给`calendar.vue`文件加个`name`熟悉就可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
下一步，将`index.js` 文件中后三行代码注释掉

/** * Created by ZWH on 2017/6/22. */
    import Calendar from './calendar.vue';
    export default Calendar;
    
    // if (typeof window !== 'undefined' && window.Vue) { 
    // window.Vue.component('clock', Clock);
    // }

重新启动项目运行即可啦，效果图是我自己修改样式后的设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]

[vue-calendar-component_GitHub]: https://github.com/zwhGithub/vue-calendar
[calendar]: /images/20230209/a47f5f4fef84407aa74ab391af2024e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20230209/b1edb6f081084b97834c84a2492a808d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200714143723744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70