解决vue，element-ui组件无法显示样式的问题

bug如上，查询原因原来是笔者使用了按需引入却忘记下载 babel-plugin-component的开发依赖。

 我们还是从头到尾进行element-ui的引入。

1.安装element-ui依赖，依据官方文档需在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({
    
    
  el: '#app',
  render: h => h(App)
});

2.按需引入

 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

 首先，安装 babel-plugin-component，要下载 babel-plugin-component依赖按需引入vue组件，笔者用ui面板引入

安装好依赖后，在babel.config.js文件中配置关于element-ui的插件

module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
    
    
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk' // 风格样式，可自行更换
      }
    ]
  ]
}

3.引入想要的组件

 此处只引入用到的组件。

import Vue from 'vue'
import {
    
    
  Breadcrumb,
  BreadcrumbItem,
  Card,
  Pagination
} from 'element-ui'

Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)	// 面包屑组件
Vue.use(Card)
Vue.use(Pagination)	// 分页组件

成功效果如下