close

Vue.js のインストールと最初のプロジェクトの作成

Vue.js をインストールするには、次の手順に従います。

ステップ 1: プロジェクト用の新しいディレクトリを作成し、そのディレクトリでターミナルを開きます。

ステップ 2: npm を使用して、次のコマンドを実行して Vue CLI(コマンド ライン インターフェイス) をインストールします。 

npm install -g @vue/cli


ステップ 3: インストールが成功したら、次のコマンドを使用して新しい Vue プロジェクトを作成できます。 

vue create my-vue-project


ステップ 4: Babel、ESLint、CSS プリプロセッサ(オプション) のインストールなど、プロジェクトの構成オプションを選択します。

ステップ 5: プロジェクトの作成プロセスが完了したら、次のコマンドを使用してプロジェクト ディレクトリに移動します。 

cd my-vue-project


ステップ 6: 次のコマンドを実行して Vue プロジェクトを開始します。 

npm run serve


起動プロセスが完了すると、ブラウザ上に Vue アプリケーションにアクセスするための URL が表示されます。

Vue.js の簡単な例:

新しい HTML ファイルを作成し、 index.html 「`」という名前を付けましょう。 このファイルに次のコードを追加します。 

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

h1 この例では、タグとボタン を備えた単純な Vue アプリケーションを作成しました。 ボタンをクリックするとメッセージが変わります。

ファイルを保存し index.html  、ブラウザで開きます。 最初のメッセージは「Hello Vue.js!」として表示されます。 ボタンをクリックすると、メッセージが「メッセージが正常に変更されました!」に変わります。

これは、Vue.js を始めるための簡単な例にすぎません。 アプリケーションの開発中に、Vue.js のさらに多くの機能や強力な機能を探索できます。