Vue Academy · レッスン

Vue CLIのインストール

Q: 「Vue CLIのインストール」で何を学びますか？

Vue CLIをインストールして、新しいプロジェクトを作成します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue CLIをインストールして、新しいプロジェクトを作成します

「Vue CLIのインストール」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。

Vue CLIとは

Vue CLIは、Vueプロジェクトのひな形を作成・管理するための従来型のコマンドラインツールです。

妥当なデフォルト設定でプロジェクトを作成します
プラグインを通じてビルド設定を管理します
webpackを基盤としています

長年標準的なツールでしたが、現在のVueではViteが推奨されています。

Vue CLIのグローバルインストール

CLIをグローバルにインストールすると、どの場所からでもvueコマンドを使えるようになります。

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

プロジェクトの作成

vue createを使って新しいプロジェクトのひな形を作成します。プロジェクト名を指定します。

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

プリセットの選択

CLIではプリセットを選択します。

DefaultではBabelとESLintが設定され、すぐに始められます
Manually select featuresでは、Router、Vuex、TypeScript、テストなどを追加できます

プリセットは保存して、今後のプロジェクトで再利用できます。

機能の手動選択

手動選択を選ぶと、必要な機能を切り替えて選択します。

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

プロジェクトの実行

作成後、CLIにアプリを起動するコマンドが表示されます。

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Viteの登場

Viteは、Vueチームが開発した最新のビルドツールです。

ネイティブESモジュールを使用するため、すぐに起動します
Hot Module Replacement（HMR）が非常に高速です
webpackベースのVue CLIよりも大幅に高速です

現在、新しいVueプロジェクトにはViteが推奨されています。

ViteとVue CLIの比較

2つのツールを比較してみましょう。

Vue CLIはwebpackを使用し、初回起動は遅いものの、成熟していて設定の自由度が高いツールです
ViteはesbuildとネイティブESMを使用し、ほぼ瞬時に起動するため、今後の標準となるツールです

Vue CLIは現在メンテナンスモードです。レガシープロジェクトを保守している場合を除き、Viteを使うことをおすすめします。

npm create vue@latest

新しいViteベースのVueプロジェクトを始める公式の方法は、create-vueツールを使うことです。

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

create-vueプロジェクトの実行

create-vueでは、Viteの標準スクリプトを使用します。

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

どちらを使うべきか

選択する際の目安は次のとおりです。

2024年以降に新しく始める場合は、npm create vue@latest（Vite）を使います
Vue CLIで作られた古いプロジェクトを保守している場合は、そのまま使い続けます
最も高速な開発体験を求める場合は、Viteが適しています

理解度チェック

Vueのツール選びについての理解度を確認しましょう。

まとめ：Vue CLIのインストール

Vueのプロジェクト作成ツールについて学びました。

Vue CLIはnpm install -g @vue/cliでインストールします
vue createはプリセットを使ってプロジェクトのひな形を作成します
Viteは最新で高速な代替ツールです
npm create vue@latestが現在推奨されている始め方です

次は、生成されたプロジェクトの構成を見ていきます。

よくある質問

「Vue CLIのインストール」レッスンは無料ですか？

はい。「Vue CLIのインストール」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。

「Vue CLIのインストール」で何を学びますか？

Vue CLIをインストールして、新しいプロジェクトを作成しますブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/3です。

「Vue CLIのインストール」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る