質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1978閲覧

Vue CLIでElementが導入できない

amefure

総合スコア3

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/12/12 22:55

編集2022/01/12 10:55

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ファイル内のコードはちゃんと追加されていました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

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

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

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

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

投稿2021/12/13 02:04

FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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
FKM

2021/12/13 04:03

ちなみに警告はgitなどでレポジトリ作ってないから、コミットしといた方がいいよってメッセージなので、それはシステム不具合と直接の関係はないと思います。
amefure

2021/12/13 07:06

そうなんですね! 警告の意味が分かっただけでも進歩しました!! ありがとうございます。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問