【Vue.js】Elementを導入したときにエラーがいっぱいでた話

はじめに

Vue.jsにElementを導入したときにつまづいたことを書いておきたいと思います。

エラー　その１

Module parse failed: Unexpected character '' (1:0)

というようなエラーがでてきました。

対処法

{ test: /\.css$/, loader: 'style-loader!css-loader' },

webpack.config.jsのloadersに追加すれば大丈夫でした。

WebPack + Vueで、「Element」導入時にハマった点 - Qiita

エラー　その２

Error: Can't resolve 'style-loader' in '~'

というエラーが次にでてきました。

対処法

npm install style-loader --save-dev

をコマンドプロンプト等で打ち込んでください。

webpack - Module not found: Error: Can't resolve 'style-loader' - reactjs - Stack Overflow

エラー　その３

Module build failed: Unknown word (2:1)

まだまだエラーは続きます。

対処法

npm install url-loader

をコマンドプロンプトで打ち込んだ後、

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

をwebpack.config.jsのloadersに追加します。

そして、webpack.config.jsの上に書いてある

      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },

という箇所を削除をしてしまってください。

WebPack + Vueで、「Element」導入時にハマった点 - Qiita

その後・・・

以上の操作をしたところ、

いつものが表示できました！

さいごに

私の知識不足がかなり原因かもしれませんが、かなり導入に苦労をしてしまいました。
ぜひ同じように悩んでいるかたの参考に少しでもなれば幸いです！