vue引入element-ui报错

一、引入css报错

1.引入css代码 

import 'element-ui/lib/theme-chalk/index.css';

2.报错信息

./node_modules/element-ui/lib/theme-chalk/index.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";.el-pagination--small .arrow.disabled,.el-table .hidden-columns,.el-table td.is-hidden>*,.el-table th.is-hidden>*,.el-table--hidden{visibility:hidden}.el-input__suffix,.el-tree.is-dragging

3.报错原因，没有loader处理vue的css文件，导致css文件内容没被解析

4.解决：在webpack配置里面加上如下信息

{
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },

二、引入element-ui报错

1.引入vue代码

import ElementUI from 'element-ui';
Vue.use(ElementUI);

2.报错信息

"export 'default' (imported as 'ElementUI') was not found in 'element-ui'

3.解决

babel.config.js文件的plugins去除’plugin-transform-runtime‘这个插件

三、引入Message组件每次刷新页面都会展示一个弹窗

1.引入代码

import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import {Message} from 'element-ui'
Vue.use(Message)
Vue.prototype.$message = Message

2.解决：改写成如下写法即可

import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import { Message } from 'element-ui';
Vue.component(Message.name, Message);
Vue.prototype.$message = Message;