引入ElementUI 月曆元件報錯Module parse failed: Unexpected token (65:6)

由于業務需求，需要一個小型月曆，ElementUI 元件中有一個月曆元件，不過太大了，功能沒有日期選擇器中的月曆全，是以，就想到單獨引入月曆選擇器中中的月曆元件

打開源碼包找到月曆元件所在位置，并引入

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

果不其然，報錯了

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、安裝依賴

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      

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()
  }
}
      

最後成功引入, 不過修改預設是隐藏的, 而且元件不接收參數，可以使用繼承的方式将隐藏屬性改為顯示，業務頁面再進行引入

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

export default {

  extends: DatePanel,

  data() {
    return {
      visible: true
    };
  }
};
</script>
      

修改樣式之後的效果

參考

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