0Pricing
Vue Academy · レッスン

生成されたプロジェクト構成

Vueプロジェクトによって生成されるファイルとフォルダーを見ていきます

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

プロジェクトを見てみる

ひな形から作成したVueプロジェクトには、予測しやすいフォルダー構成があります。

  • src/アプリケーションのソースコード
  • public/そのまま配信される静的アセット
  • package.json依存関係とスクリプト
  • index.htmlVueがマウントされるページ

ファイルの場所を把握すると、プロジェクト内をすばやく移動できるようになります。

srcフォルダー

src/フォルダーには、自分で記述するすべてのコードが入ります。

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

main.jsエントリーポイント

main.jsはアプリの起動処理を行う場所です。ここでアプリを作成してマウントします。

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

App.vueルートコンポーネント

App.vueはルートコンポーネントです。ほかのすべてのコンポーネントはこの中に配置されます。

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

componentsフォルダー

components/フォルダーには、再利用可能な単一ファイルコンポーネントが入ります。

  • 各.vueファイルが1つのコンポーネントです
  • 必要な場所でインポートして使います
  • アプリが大きくなったらサブフォルダーに整理します

publicフォルダー

public/フォルダーには、ビルド出力にそのままコピーされる静的ファイルが入ります。

  • ここに置いたファイルはバンドラーによる処理を受けません
  • favicon、robots.txt、固定アセットなどに使用します
  • ルートからの絶対パスで参照します

index.htmlのマウント先

index.htmlは単一のHTMLページです。マウント先が含まれています。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

package.jsonには、プロジェクトとその依存関係が記述されています。

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

package.jsonのスクリプト

scriptsセクションでは、npm runで実行するコマンドを定義します。

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

assetsとpublicの違い

静的ファイルを保存する方法は2つあります。

  • src/assets/はバンドラーで処理され、キャッシュ用にハッシュ化され、コードからインポートします
  • public/はそのままコピーされ、固定パスで参照します

インポートするファイルにはassetsを、URLを固定する必要があるファイルにはpublicを使います。

全体の流れ

アプリの読み込み時には、次の流れで処理されます。

  • ブラウザーがindex.htmlを読み込みます
  • モジュールスクリプトタグを通じてmain.jsを実行します
  • main.jsがApp.vueを#appにマウントします
  • App.vueが子コンポーネントをレンダリングします

理解度チェック

Vueプロジェクトの構成についての知識を確認しましょう。

まとめ：プロジェクトの構成

Vueプロジェクトのレイアウトを確認しました。

  • src/にはコードが入ります
  • main.jsがアプリを起動します
  • App.vueはルートコンポーネントです
  • components/には再利用可能なパーツが入ります
  • public/とindex.htmlが静的コンテンツを提供します
  • package.jsonで依存関係とスクリプトを定義します

次は、CLIの設定とプラグインの追加について学びます。

よくある質問

「生成されたプロジェクト構成」レッスンは無料ですか？

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

「生成されたプロジェクト構成」で何を学びますか？

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

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

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

「生成されたプロジェクト構成」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Vue CLIのインストール
  2. 生成されたプロジェクト構成
  3. CLIの設定とプラグイン
← Vue Academyに戻る