Vue CLIでElementが導入できない

Vue.jsの学習を始めたばかりの初心者です。

参考書【これからはじめるvue.js実践入門】を見ながら学習を進めている中で表題の通り、 Vue CLIでプラグインElementを導入しようとしてもエラーが出てしまいます。

Vue/CLIの導入は問題なく完了しプロジェクトの作成、サーバーの起動
、アクセスも正常にできました。（npm run server/yarn serve ）

他のプラグイン（jest,Router,Vuexなど）はエラーも起きずに導入できたのですが、elementのみエラーが起きてしまいます。

●環境
Mac
npm：v8.1.0
node：v16.13.0
Vue/cli：v4.5.15
yarn：1.22.17

●導入の流れ
まずはデスクトップにVueのプロジェクトを作成しました。プリセットは以下の通りです。yarnを使って生成していると思います。

Default (Vue 3) ([Vue 3] babel, eslint)

この時点でサーバーを起動させるとちゃんとプロジェクトは動作します。

npm run server
yarn serve 
// 両者とも

続いて以下のコマンドを叩きElementの導入を開始しました。

vue add element

それぞれの質問は「Fully import」、「Yes」、「ja」と打ち込み進みました。

 Installing vue-cli-plugin-element...


? How do you want to import Element? Fully import
? Do you wish to overwrite Element's SCSS variables? Yes
? Choose the locale you want to load ja

~~その際に以下のような警告も出ました。~~

// ここは問題ないと教えていただきました
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.

以下のインストールまでは正常に完了しました。


✔  Successfully installed plugin: vue-cli-plugin-element

しかしここからyarnの場合は以下のようなエラーしか出ません。

????  Invoking generator for vue-cli-plugin-element...
????  Installing additional dependencies...

yarn install v1.22.17
[1/4] ????  Resolving packages...
[2/4] ????  Fetching packages...
[3/4] ????  Linking dependencies...
[4/4] ????  Building fresh packages...
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
 ERROR  command failed: yarn

npmでインストールしていた時はこっちが出ていました。


npm ERR! code 1
npm ERR! path /Users/ユーザー名/Desktop/my-cli/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js

 ERROR  command failed: npm install --loglevel error vue-cli-plugin-element -D --legacy-peer-deps

CLIは初心者は導入するべきではないのは分かりましたが、参考書を進める過程で（またこの先いずれ解決すべきエラー）だと思うので質問させていただきました。

至らぬ点や情報が足りない場合もあると思いますので必要な情報を再掲いたします。

よろしくお願いします。

ちなみに導入がうまく行くとトップページにel-buttunが出てくると思いますが、App.vueファイル内のコードはちゃんと追加されていました。

行動規範の内容に同意します

回答1件

これが原因じゃないでしょうか？

Vue CLI3でElementUIプラグインを導入

オンデマンドインストールの場合は、必要なエレメントコンポーネントのみをインストールしてプロジェクトサイズを小さくすることが出来ます。

その場合、別途「babel-plugin-component」をインストールする必要があります。

質問の画像を見たら、Fully ではなくて　import　を選択しているようです。Fully importではなくて、それぞれ

Fully →　フルインストール
import →　オンデマンドインストール（別途importから必要なパーツを呼び出すやり方）

投稿2021/12/13 02:04

FKM

総合スコア3647

amefure

2021/12/13 03:18 編集

回答ありがとうございます！今確認ができないので何とも言えませんがインストールレベルの確認の際に ``` ? How do you want to import Element? (Use arrow keys) ❯ Fully import Import on demand ``` と問われるので Fully import →フルインストール Import on demand →オンデマンドなのかと認識して実行しました！一度試してみますね！追加この記事を見るとインストールの際の指定は間違っていなさそうです…。。 https://tech.smartcamp.co.jp/entry/2019/04/18/184533?amp=1