[Vue.js]element-uiの導入にはまる #Vue.js

導入時のエラー解消の記録を残しておきます。
私自身は、Nodeとかwebpackなどの知識は殆どありません。
結局webpack.config.jsの書き方がいけなかったみたいで、仕様の理解は大切なんだなと思いました。

環境

windows 8.1
node 8.9.4
npm 5.6.0
vue.js 2.9.3
Git bash + ConEmu

手順

公式サイトのQuick startからはじめたが、違う点が幾つか。

vue init webpackではなくvue init webpack-simpleを使用。(webpackとかなんか難しそうだし。webpack-simpleの方が構成時のファイルが少なかったので。。。)
構成はsassだけNoにした。(sassとか私にはまだ早いよ。。。)

$ vue init webpack-simple

? Generate project in current directory? Yes
? Project name element-ui-test
? Project description A Vue.js project
? Author Sa_Ru <sa_ru@sample>
? License MIT
? Use sass? No

$ npm install
$ npm run dev

で、ここまでは動いたのを確認。

公式通りmain.js変更して、babel-plugin-componentのインストールして、.babelrcの変更して
"Next, if you need Button and Select, edit main.js:"の箇所でストップ!
npm run devを実行すると失敗した。

Failed to compile.

./src/main.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\Users\\hoge\\Source\\gitlab\\node\\vue\\element-ui2"
    at C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\Users\hogehoge\vue\element-ui2\node_modules\babel-loader\lib\index.js:50:20)
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

es2015のプリセットが見つからないとかなんとか。
とりあえず削除して回避。(あとで勉強します。)

[.bablerc]

{
  "plugins": [["component", {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]
}

でコンパイルするとまたFailed。。

Failed to compile.

./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:327-363
 @ ./node_modules/element-ui/lib/theme-chalk/index.css
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

loaderが何やら、ちょっと何言ってるかわからないです。
ここやここを参考にさせてもらって直して行きました。

まず、拡張子がwoff、ttfだからwebpack.config.jsを見てみると設定がない。
追加しましょう! (ここでもどこに記載すれば良いのかとかグダグダやってました。)

直したwebpack.config.jsはこちら

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

上の記述を追加したらコンパイルが通りました。
とりあえずコレでElement-UIが使えます。

Internationalization

サンプルが充実しているのでコピペして確かめるだけでも楽しいですね。
デフォルトが中国語っぽいのでInternationalizationを参考に日本語にするのに結構たってから気づきました。

[main.js]

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import locale from 'element-ui/lib/locale/lang/ja' //追加

Vue.use(ElementUI, { locale }) //変更

new Vue({
  el: '#app',
  render: h => h(App)
})