vue的element-ui问题

背景

今天,在学习vue.js中,我引入了element-ui。执行步骤如下:
a> vue init webpack-simple element-ui
b> cd my-pro(打开生成的vue项目)
c> cnpm install(此处用的是国内淘宝镜像)
d> 我先用的是webpack-simple 所以要先配置一下style-loader:cnpm install style-loader -S
e> 配置安装element-ui:cnpm install element-ui -S
f> 安装完成后用编辑器打开项目,在main.js添加以下内容

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

Vue.use(ElementUI) //记得全局注册

g> 运行了npm run dev

结果
  • 1.在引入element-ui时,运行npm run dev,突然,提示如下错误:
ERROR in ./node_modules/_element-ui@2.13.0@element-ui/lib/theme-chalk/fonts/elem                                                                                            ent-icons.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

  • 2.通过一番google,发现原来我安装了element-ui,但是在webpack.config.js中没有解析引入的路径。解决方法其实很简单,就是在webpack.config.js中引入css解析路径即可。
     {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      //引入element-ui的css解析路径
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值