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

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

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

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

Vue CLI

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

Q&A

0回答

931閲覧

Vue CLIのGUIによるツールでプロジェクトを生成したい

yuki-serata

総合スコア4

Vue.js

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

Vue CLI

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

0グッド

0クリップ

投稿2021/02/11 03:18

環境

OS: macOS Catalina 10.15.7
Vue CLI -> v4.5.11
プラウザ:Google Chrome

やったこと、試したこと

プロジェクトを作りたいフォルダに移動した後、ターミナルで

vue ui

とし、以下のページがChromeで開きました。
![イメージ説明
Vue CLIのGUIによるツールを起動した最初の画面

この画面で、「作成」タブに移動した後、「ここに新しいプロジェクトを作成する」ボタンを押すと以下の画面になりました。

イメージ説明
プロジェクト作成画面

上のような設定で「次へ」ボタンを押して次に行きます。

イメージ説明
プリセット設定画面

Vue3を選んで下の「プロジェクトを作成する」ボタンを押しました。手元の資料によるとこれで問題なくプロジェクトが作成され、「プロジェクトダッシュボード」なる画面に切り替わるそうなのですが、数分後表示されたのは以下の画面でした。

イメージ説明
数分たって表示された画面

プリセット設定画面と何も変わってないように見えます。画面下に> Installing CLI plugins. This might take a while...
とあるので、まだ生成中なのかなと思いさらに数分待っていたのですがこの画面のまま何も起きませんでした。
ターミナルを見ると、

YukinoAir:Vue3 yukiserata$ vue ui ???? Starting GUI... ???? Ready on http://localhost:8000 {"type":"error","data":"An unexpected error occurred: \"https://registry.npm.taobao.org/@vue%2fcli-plugin-babel: tunneling socket could not be established, cause=getaddrinfo ENOTFOUND proxyserver\"."} ERROR command failed: yarn --json Error: Command failed: vue create wasshoi_app --skipGetStarted --inlinePreset {"vueVersion":"3","useConfigFiles":false,"plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"base","lintOn":["save"]}}} ✨ Creating project in /Users/yukiserata/Documents/Vue3/wasshoi_app. ???? Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... at makeError (/Users/yukiserata/.npm-global/lib/node_modules/@vue/cli/node_modules/execa/index.js:174:9) at /Users/yukiserata/.npm-global/lib/node_modules/@vue/cli/node_modules/execa/index.js:278:16 at processTicksAndRejections (internal/process/task_queues.js:93:5) at async /Users/yukiserata/.npm-global/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/projects.js:354:5 at async Object.wrap (/Users/yukiserata/.npm-global/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/progress.js:39:14) { code: 1, stdout: '✨ Creating project in /Users/yukiserata/Documents/Vue3/wasshoi_app.\n' + '???? Initializing git repository...\n' + '⚙️ Installing CLI plugins. This might take a while...\n' + '\n', stderr: null, failed: true, signal: null, cmd: 'vue create wasshoi_app --skipGetStarted --inlinePreset {"vueVersion":"3","useConfigFiles":false,"plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"base","lintOn":["save"]}}}', timedOut: false, killed: false }

と表示されていました。メッセージ中のhttps://registry.npm.taobao.orgに原因があるのかと思い、アクセスしたのですが訳のわからないページが表示され、お手上げでした。
次の行の

ERROR command failed: yarn --json

も臭いと思い、ググったのですが有益な情報を見つけられませんでした。
素人目でエラーメッセージを見る限り、全くの失敗というよりも生成に完全に成功したわけではないといった感じなのでしょうか。事実、生成したかったフォルダ内にwasshoi_appがあります。
後、ひとつ気になっていたのが、上に貼った画面で「詳細」「プリセット」の横の「機能」「設定」タブがクリックしても反応しませんでした。これを考えると、そもそもGUIツールの問題なのかなとも思います。

最後に

長々と書いてしまい申し訳ありませんが、状況を詳しくお伝えしようとした結果です。なにぶんプログラミング初心者ですので至らぬ点あればコメントいただければ幸いです。

ご回答どうぞよろしくお願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問