在学习vue期间,刚开始配置element-ui时总是遇到各种各样的问题,记录一下解决问题的一些大致思路,方便以后做项目,也希望对别人有所帮助。

1:vue init webpack-simple element-ui

2.cd element-ui(打开生成的vue项目)

3.cnpm install (不用npm是个人习惯,防止产生错误)

4.在这里我用的是webpack-simple 所以要先配置一下style-loader:cnpm install style-loader -S

5.配置安装element-ui:cnpm install element-ui -S

6.安装完成后用编辑器打开项目,在main.js添加以下内容

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

记得要全局注册

Vue.use(ElementUI)

做完这些后,我直接npm run dev,报了一个错误

./node_modules/_element-ui@2.3.7@element-ui/lib/theme-chalk/fonts/element-icons.ttfModule parse failed: Unexpected character '' (1:0)You may need an appropriate loader to handle this file type.(Source code omitted for this binary file) @ ./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_element-ui@2.3.7@element-ui/lib/theme-chalk/index.css 7:411-447 @ ./node_modules/_element-ui@2.3.7@element-ui/lib/theme-chalk/index.css @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.2@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

然后我查了好久发现要在webpack.config.js里配置一下字体的loader就可以了

 

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  loader: 'file-loader'
},

最后npm run dev可以顺利打开项目

                                  

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐