引入ElementUI 日历组件报错Module parse failed: Unexpected token (65:6)

由于业务需求，需要一个小型日历，ElementUI 组件中有一个日历组件，不过太大了，功能没有日期选择器中的日历全，所以，就想到单独引入日历选择器中中的日历组件

打开源码包找到日历组件所在位置，并引入

import DatePanel from "element-ui/packages/date-picker/src/panel/date.vue";

  

 

  
1
 

果不其然，报错了

Module parse failed: Unexpected token (65:6)
You may need an appropriate loader to handle this file type.
| }, this.$slots.default);
| const wrap = (
| <div
| ref="wrap"
| style={ style }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

最后有人帮忙解决了

1、安装依赖
https://github.com/vuejs/babel-plugin-transform-vue-jsx

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

2、添加vue-cli3的 vue.config.js配置

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => { config.module .rule('thejs') .test(/\.js$/) .include .add(path.resolve('src')) .add(path.resolve('node_modules/element-ui/packages')) .end() .use('babel-loader') .loader('babel-loader') .end()
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

最后成功引入, 不过修改默认是隐藏的, 而且组件不接收参数，可以使用继承的方式将隐藏属性改为显示，业务页面再进行引入

<script>
import DatePanel from "element-ui/packages/date-picker/src/panel/date.vue";

export default { extends: DatePanel, data() { return { visible: true };
  }
};
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

修改样式之后的效果

参考
https://github.com/ElemeFE/element/issues/14379

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/103932261