Vue3 プロジェクト説明

Vue 3 プロジェクトは複数のファイルとフォルダーで構成されており、各部分には特定の役割があります。

以下は Vue 3 プロジェクトコードの基本的な解析であり、プロジェクトの構造と各部分の機能を理解するのに役立ちます。

  • Vue 3 プロジェクトは複数のファイルとフォルダーで構成されており、コアファイルは次のとおりです。index.html、main.jsとApp.vue。

  • Vue コンポーネントはアプリケーションの基本的な構成要素であり、単一ファイルコンポーネント（.vueファイル）で定義されます。

  • Vue Router はルーティングの管理に使用され、Vuex は状態管理に使用されます。

プロジェクト構造

Vue 3 プロジェクトには通常、以下のファイルとフォルダーが含まれます。

my-vue-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── assets/         # 静态资源（如图片、字体等）
│   ├── components/     # 可复用的 Vue 组件
│   ├── views/          # 页面级组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 项目入口文件
│   ├── router.js       # 路由配置
│   ├── store.js        # Vuex 状态管理配置
│   └── ...             # 其他配置和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

コアファイルの解析

public/index.html

public/index.htmlVue アプリケーションの HTML テンプレートファイルです。

Vue はアプリケーションを<div id="app"></div>中にマウントします。

例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

src/main.js

src/main.jsVue アプリケーションのエントリーファイルです。

src/main.jsVue アプリケーションのインスタンスを作成し、ルートコンポーネント（通常は App.vue）を index.html 内の div#app にマウントします。

例

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/App.vue

src/App.vueVue アプリケーションのルートコンポーネントです。

src/App.vue通常、アプリケーションのメインレイアウトとルートビューを含みます。

例

<template>
  <div id="app">
    <h1>Hello, Vue 3!</h1>
    <router-view></router-view> <!-- 路由视图 -->
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

src/components/

src/components/フォルダーには再利用可能な Vue コンポーネントが含まれます。

例: HelloWorld.vue

<template>
  <div>
    <h2>Hello, World!</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style scoped>
h2 {
  color: blue;
}
</style>

src/views/

src/views/フォルダーにはページレベルのコンポーネントが含まれ、通常はルート設定と一緒に使用されます。

例: Home.vue

<template>
  <div>
    <h2>Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

src/router.js

src/router.jsVue Router の設定ファイルであり、ルートを定義するために使用されます。

例

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

src/store.js

src/store.jsVuex 状態管理の設定ファイルです（Vuex を使用する場合）。

例

import { createStore } from 'vuex';

export default createStore({
  state: {
    message: 'Hello, Vuex!',
  },
  mutations: {
    setMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('setMessage', newMessage);
    },
  },
});

package.json

package.jsonプロジェクトの設定ファイルであり、プロジェクトのメタデータ、依存関係、スクリプトが含まれます。

例

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve", // 启动开发服务器
    "build": "vue-cli-service build", // 构建生产环境代码
    "lint": "vue-cli-service lint"    // 代码格式化
  },
  "dependencies": {
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  }
}

Vue コンポーネントの基本構造

Vue コンポーネントは Vue アプリケーションの中心的な構成要素です。

コンポーネントには通常、以下の部分が含まれます。

1、単一ファイルコンポーネント（.vue ファイル）

1つの.vueファイルには3つの部分が含まれます。<template>、<script>と<style>。

例

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="updateMessage">メッセージを更新</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    updateMessage() {
this.message = '消息已更新！';
    },
  },
};
</script>

<style scoped>
h2 {
  color: green;
}
</style>

2、テンプレート（<template>）

  • HTML と Vue テンプレート構文を使用して、コンポーネントの UI を定義します。

  • 補間をサポート（{{ }}）、ディレクティブ（例:v-if、v-for）およびイベントバインディング（例:@click）。

3、スクリプト（<script>）

  • データ、メソッド、ライフサイクルフックなどを含むコンポーネントのロジックを定義します。

  • 使用してexport defaultコンポーネントオプションをエクスポートします。

4、スタイル（<style>）

  • コンポーネントのスタイルを定義します。

  • 使用してscoped属性はスタイルを現在のコンポーネント内に制限できます。

Vue プロジェクトの実行フロー

  1. 開発サーバーの起動：

    • 実行しnpm run serve 或 yarn serve、開発サーバーを起動します。

    • ブラウザを開いてアクセスしhttp://localhost:8080、アプリケーションを表示します。

  2. 本番環境コードのビルド：

    • 実行しnpm run build 或 yarn build、最適化された本番環境コードを生成します。

  3. コードのフォーマット：

    • 実行しnpm run lint 或 yarn lint、コードをフォーマットします。

その他の拡張