Vue.jsのコンポーネント集「Element」導入でハマったポイント

Elementとは

Element とは Vue.js で使うためのコンポーネント集です。
デートピッカー、カラーピッカー、ダイアログといった便利なものや、フォームの基本パーツまで様々なものが用意されています。

他の人がハマらないように書きました

この記事では筆者が Element を導入する時にハマったポイントを書いています。ほとんどは公式ドキュメントをちゃんと読んでいないことが原因なのですがｗ

基本的には下記の紹介ページと公式ドキュメントでなんとかなりますが、同じようにハマる人がいそうなので記事として残すことにしました。

≫Vue.jsのコンポーネント詰め合わせ「Element」がスゴかった
≫Vue.jsで高品質なUIライブラリElementを使ってみる
≫公式ドキュメントの導入ページ

その①　Webpack の設定でエラーになる

下記は公式ドキュメントの Webpack の設定です。Webpack1ならたぶん問題ありません。

webpack.config.js

  //〜略〜
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  //〜略〜

Webpack2 では css-loader と file-loader でエラーになります。
下記のように変更します。

webpack.config.js

  //〜略〜
  module: {
    rules: [ // 変更
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader'] // 変更
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        // ここから変更
        use: [{
          loader: 'file-loader',
          query: {
            name: '[name].[ext]?[hash]'
          }
        }]
        // ここまで変更
      }
    ]
  },
  //〜略〜

その② Webフォントが表示されない

デフォルトテーマのWebフォントは node-modules/element-ui/lib/theme-default/fonts/element-icons.woff が用意されています（.ttf もあります）。特に指定をしていなければ jsファイルと同じディレクトリに書き出されます。

dist/
 +- js/
     +- bundle.js
     +- element-icons.woff

※実際には b02bdc1b846fd65473922f5f62832108.woff のようなファイル名になります。

しかし出力された css を見ると下記のようになっています。出力先が入っていません。

@font-face{
  font-family:element-icons;
  src:
    url(element-icons.woff) format('woff'),
    url(element-icons.ttf) format('truetype');
  font-weight:400;font-style:normal
}

これは webpack.config.js の output.publicPath を指定することで対応できます。
file-loader を使ったことがある人ならきっと常識なのでしょう。

webpack.config.js

    output: {
        publicPath: 'js/', // 追加
        filename: "[name].bundle.js",
    },

output.publicPath指定後のcss

@font-face{
  font-family:element-icons;
  src:
    url(js/element-icons.woff) format('woff'),
    url(js/element-icons.ttf) format('truetype');
  font-weight:400;font-style:normal
}

そんなわけでこれから Element　を使ってみます。