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

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

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

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

Vue CLI

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

JavaScript

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

受付中

Vue CLIでElementが導入できない

amefure
amefure

総合スコア2

Vue.js

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

Vue CLI

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

JavaScript

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

1回答

0評価

0クリップ

708閲覧

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vue CLI

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

JavaScript

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