vue-導入element-ui

安裝

npm install element-ui -S

項目中導入

修改main.js

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

Vue.use(ElementUI);

new Vue({
    el: '#app',
    router,
    // components: { App },
    // template: '<App/>',
    render: h => h(App)
})

問題

Module parse failed: Unexpected character ' '

> npm run dev
ERROR in ../node_modules/element-ui/lib/theme-chalk/fonts/element-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)
 @ ./node_modules/css-loader!../node_modules/element-ui/lib/theme-chalk/index.css 7:894-9304-930
 @ ../node_modules/element-ui/lib/theme-chalk/index.css
 @ ./src/main.js                                                                      c/main.js
 @ multi (webpack)-dev-server/client?http://localhost:7777 webpack/hot/dev-server ./src/main.js

ERROR in ../node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!../node_modules/element-ui/lib/theme-chalk/index.css 7:818-855 @ ../node_modules/element-ui/lib/theme-chalk/index.css
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:7777 webpack/hot/dev-server ./src/main.js

解決辦法

修改webpack.config.js文件，在module\rules下增加：

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