Vue项目中Element UI组件未注册的问题原因及解决方法

[Vue warn]: Unknown custom element: <el-date-picker> - did you register the component correctly?

[Vue warn]: Unknown custom element: <el-date-picker> - did you register the component correctly?

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

npm install babel-plugin-component -D

module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
};

import { DatePicker, Select, Button, Option } from 'element-ui';

export default {
  components: {
    [DatePicker.name]: DatePicker,
    [Select.name]: Select,
    [Button.name]: Button,
    [Option.name]: Option,
  },
};

import { DatePicker, Select, Button, Option } from 'element-ui';

export default {
  components: {
    [DatePicker.name]: DatePicker,
    [Select.name]: Select,
    [Button.name]: Button,
    [Option.name]: Option,
  },
};

git checkout -- path/to/your/file.vue

git revert <commit-hash>

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

// MyComponent.vue
<template>
  <div>
    <el-date-picker v-model="date"></el-date-picker>
    <el-select v-model="value">
      <el-option label="Option 1" value="1"></el-option>
    </el-select>
  </div>
</template>

<script>
import { DatePicker, Select, Option } from 'element-ui';

export default {
  components: {
    [DatePicker.name]: DatePicker,
    [Select.name]: Select,
    [Option.name]: Option,
  },
  data() {
    return {
      date: '',
      value: '',
    };
  },
};
</script>