Zenn
Closed4

Vue.jsを使ってみる

Vue.js
dev8dev8

Vue.jsとは

Vue.jsはJavaScriptフレームワークで、HTML、CSS、JavaScriptを基に、宣言型でコンポーネントベースのプログラミングモデルを提供します。これにより、効率的で柔軟な方法で複雑なユーザーインターフェースを構築できます。

Vue.jsの主要な機能

  • 宣言的レンダリング

Vueは標準のHTMLを拡張し、テンプレート構文を提供することで、JavaScriptの状態に基づいてHTMLの出力を宣言的に記述できるようにします。

  • リアクティビティ

Vueは自動的にJavaScriptの状態変化を追跡し、変更が発生したときに効率的にDOMを更新します。

公式ドキュメント

https://vuejs.org/guide/introduction.html

dev8dev8

簡単に使ってみる

今回はこの公式ドキュメントを参考に使ってみます。
https://vuejs.org/guide/quick-start.html

Creating a Vue Application

今回はnpmを使って作成します。

npm create vue@latest

以下のコードを実行してサーバーを起動します。

cd ディレクトリ名
npm install
npm run dev

dev8dev8

ページを作成する

srcディレクトリにページ名.vueという拡張子のファイルを作成する。

<template>
  <div>
    <h1>New Page</h1>
    <!-- ページの内容をここに追加 -->
  </div>
</template>

<script>
export default {
  name: 'NewPage',
  // コンポーネントのロジックをここに追加
}
</script>

<style scoped>
/* スタイルをここに追加 */
</style>
dev8dev8

ルーティングの設定

Vue Routerを使用して、新しいページへのルートを設定します。router/index.jsなどの適切な場所に、新しいページのルートを追加します。

import Vue from 'vue';
import Router from 'vue-router';
import NewPage from '@/components/NewPage.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/new-page',
      name: 'NewPage',
      component: NewPage
    },
    // 他のルートもここに追加
  ]
});
このスクラップは2024/05/10にクローズされました