VSCode を使用した Vue 開発
Visual Studio Code（略称 VS Code）は、Microsoft が開発した無料のオープンソースコードエディターです。多数のプログラミング言語をサポートし、構文ハイライト、スマートコード補完、コードリファクタリング、デバッグなどの機能を提供します。
Visual Studio Code は、Vue.js のコア構成要素である HTML、CSS、JavaScript を標準でサポートしています。
VS Code には内蔵ターミナルがあり、エディター内で npm、yarn などのコマンドラインツールを直接実行できるため、プロジェクトの構築と管理に便利です。
より充実した Vue.js 開発環境を希望する場合は、Volar および Volar for TypeScript 拡張機能をインストールできます。これらの拡張機能は Vue.js のインテリセンスを提供します。
VS Code についてまだ詳しくない場合や、インストールしていない場合は、以下を参照してください：VSCode チュートリアル。
Vue プロジェクトを作成する
ターミナルまたはコマンドプロンプトを開き、以下のコマンドを入力します：
npm create vue@latest
システムがプロジェクト名の入力を求めるので、ここでは次のように入力しますサンプル-vue3-app：
Vue.js - The Progressive JavaScript Framework ? 请输入项目名称： › サンプル-vue3-app
その後、いくつかのオプションが表示されるので、自分のニーズに応じて選択するか、そのまま Enter キーを押し続けます：
Vue.js - The Progressive JavaScript Framework > 请输入项目名称： … サンプル-vue3-app > 是否使用 TypeScript 语法？ … 否 / 是 > 是否启用 JSX 支持？ … 否 / 是 > 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是 > 是否引入 Pinia 用于状态管理？ … 否 / 是 > 是否引入 Vitest 用于单元测试？ … 否 / 是 > 是否要引入一款端到端（End to End）测试工具？ › 不需要 > 是否引入 ESLint 用于代码质量检测？ › 否 正在初始化项目 /Users/tianqixin/サンプル-vue3-app... 项目初始化完成，可执行以下命令： cd サンプル-vue3-app npm install npm run dev
プロジェクトの作成が完了したら、プロジェクトフォルダーに移動して依存関係をインストールします：
cd サンプル-vue3-app npm install
依存関係のインストールにも数分かかる場合があります。
以下のコマンドを入力して、Vue アプリケーションをすばやく起動します：
npm run dev
ブラウザで http://localhost:5173 を開くと、次のように表示されます：
Ctrl+C を押すと、vue-cli-service サーバーを停止できます。
VS Code で Vue プロジェクトを開く
ターミナルまたはコマンドプロンプトから、作成した Vue プロジェクトフォルダー サンプル-vue3-app に移動し、次のコマンドを使用しますcodeプロジェクトを VS Code で開きます：
cd サンプル-vue3-app code .
VS Code が起動し、エクスプローラーに Vue プロジェクトが表示されます。以下のようになります：
それを選択してインストールするだけです。
インストールが完了すると、.vue ファイルは Vue.js ファイルタイプとして認識され、以下の言語機能がサポートされます：
- 構文ハイライト
- 括弧の対応付け
- ホバー説明
インテリセンス (IntelliSense)
App.vue にコードを入力すると、HTML、CSS、および Vue.js 固有の構文（v-bind、v-for など）のインテリセンスが表示されます。
スクリプト部分では、computed プロパティなどの Vue.js 関連の JavaScript 機能のヒントも確認できます。
定義へ移動、定義を表示
インストールした Volar 拡張機能により、VS Code は Vue.js 言語サービスをサポートします。
カーソルを App に置き、右クリックして [Peek Definition] を選択し、定義情報を表示します。または、ショートカットキーを押します⌥F12。
App の定義情報を示すポップアップウィンドウが表示されます。
押すEscキーで表示ウィンドウを閉じます。
"Hello World" を変更して実行する
App.vue で、HelloWorld コンポーネントの msg カスタム属性のテキストを "Hello World!" に置き換えます：
サンプル
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="Hello World!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
App.vue ファイルを保存します（ショートカットキー⌘S 或 Ctrl+S）、その後、以下のコマンドでサーバーを再起動します：
npm run dev
ブラウザで、ページに "Hello World!" と表示されます。
