質問への答え: vue スキャフォールディングのどこに js ファイルを配置するか

フロントエンド フレームワーク Vue.js は、多くの開発者の最初の選択肢となっています。 Vue.js プロジェクトでは、適切なスキャフォールディングを使用することが非常に重要です。これにより、開発時間が節約されるだけでなく、コードの保守性とスケーラビリティも向上します。ただし、Vue.js スキャフォールディングを使用するプロセスでよくある質問は、「JS ファイルをどこに配置するか?」ということです。

最初に理解する必要があるのは、Vue.js プロジェクトには、Vue コンポーネント (.vue ファイル) と独立した JavaScript ファイル (.js ファイル) という 2 つの主なタイプの JavaScript ファイルがあります。

Vue コンポーネントは、HTML、CSS、JavaScript コードを含む自己完結型のユニットです。 Vue.js スキャフォールディングは、Vue コンポーネントのテンプレート、スクリプト、スタイルで構成される .vue ファイルの形式でコンポーネントを処理します。このファイルは通常、src/components フォルダーにあります。各 Vue コンポーネント フォルダーには次のものが含まれている必要があります:

[name].vue

[name] はコンポーネントの名前に置き換えることができます。たとえば、Header.vue、Footer.vue などです。各 .vue ファイルには、次の内容が含まれている必要があります。

<template>
  <!-- HTML代码 -->
</template>

<script>
  export default{
    // JavaScript代码
  };
</script>

<style>
  /* CSS代码 */
</style>

Vue コンポーネントでは、DOM 操作をできる限り避け、すべての JavaScript コードを現在のコンポーネントのスコープに制限する必要があります。

Vue コンポーネントは、