コードでvueファイルを作成する方法

Vue.js は、インタラクティブな Web インターフェイスを迅速に構築できる人気の JavaScript フレームワークです。他の JavaScript フレームワークとは異なり、Vue.js はコンポーネントを使用してアプリケーションを構築します。 Vue コンポーネントは、Vue テンプレート、スクリプト、スタイルを含む .vue ファイルの形式で存在します。 Vue ファイルの作成方法を見てみましょう。

Vue コンポーネントを作成するには、まず Vue CLI ツールをインストールする必要があります。このツールは Vue プロジェクトを自動的に作成し、多くの便利なツールや機能を提供します。まず、コマンド ラインに次のコマンドを入力して Vue CLI をインストールします:

npm install -g @vue/cli

インストールが完了したら、次のコマンドを使用して Vue CLI が正常にインストールされたかどうかを確認できます:

vue --version

正常にインストールされると、Vue CLI のバージョン情報が表示されます。次に、Vue CLI を使用して新しいプロジェクトを作成できます。コマンド ラインに次のコマンドを入力します。

vue create my-project

ここでの「my-project」はプロジェクトの名前で、必要に応じて変更できます。このコマンドを実行すると、Vue CLI は、デフォルト、手動、PWA、シンプルなどのプリセットを選択するように求めます。デフォルト プリセットを選択すると、デフォルト設定を含む Vue プロジェクトが自動的に生成されます。 [手動プリセット] を選択すると、さまざまな設定を手動で選択する必要があります。

Vue プロジェクトが正常に作成されたら、Vue CLI を使用してプロジェクトを実行できます。コマンド ラインに次のコマンドを入力します:

cd my-project
npm run serve

このコマンドはローカル サーバーを起動します。ブラウザで http://localhost:8080/ にアクセスして、Vue プロジェクトの実行結果を確認してください。

Vue プロジェクトを作成したので、.vue ファイルを作成しましょう。 src/components ディレクトリに新しいファイルを作成し、MyComponent.vue という名前を付けます。ファイルに次のコードを入力します。

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

<script>
export default {
   name: 'MyComponent'
}
</script>

<style>
h1 {
   color: red;
}
</style>

この .vue ファイルには 3 つの部分が含まれています: