VUE3 開発入門チュートリアル: Vue.js を使用してワンストップ開発ソリューションを実現する

Vue.js は、Web アプリケーションの構築プロセスを大幅に簡素化する人気の JavaScript フレームワークです。 Vue.js は MVC パターンを Web 開発に適用し、宣言的なレンダリングとコンポーネント化のアイデアを組み合わせて、開発者が Web アプリケーションをより迅速かつ簡単に構築できるようにします。この記事では、Vue.js フレームワークの新しいバージョンである VUE3 を紹介し、VUE3 を使用してワンストップ開発ソリューションを実装します。

1. VUE3 フレームワークの概要

Vue.js は、You Yuxi によって作成された JavaScript フレームワークであり、その目標は、シンプルな API コンポーネントを提供することで、開発者が再利用可能な Web を構築できるようにすることです。

Vue.js は基本的な MVC アーキテクチャを提供しており、このフレームワークの下で、開発者は Vue.js の宣言構文を使用して UI コンポーネントの動作とステータスを記述することができます。

Vue.js 3 は、Vue.js フレームワークの最新バージョンです。パフォーマンスと読みやすさが大幅に向上し、開発者のデバッグとテストの機能も強化されており、将来の Web 開発に役立ちます。中将の方が大事だよ。

2. VUE3 フレームワークの特徴

VUE3 フレームワークの最も注目すべき点は、そのパフォーマンスであり、前バージョンの VUE2 と比較して、VUE3 では仮想 DOM の処理が大幅に向上しています。 DOM をより効率的に更新できるため、レンダリング時間とメモリ使用量が削減されます。

第二に、VUE3 では TypeScript のサポートも向上しています。TypeScript を使用すると、コード作成時にエラーをキャッチできるため、アプリケーションの保守性が大幅に向上します。

VUE3 フレームワークは、新しい合成 API も提供し、テンプレート コンパイラーを別のパッケージに移動します。これにより、開発者は状態を UI からより適切に分離できるようになり、フレームワーク開発が簡素化されます。

3. ワンストップ開発ソリューション

次に、VUE3 を使用して、シンプルなワンストップ開発ソリューションを実装します。このアプリケーションでは、ログイン、登録、簡単なデータ管理を実装します。

1. 新しい VUE3 プロジェクトを作成する

まず、Vue.js をインストールする必要があります。ここでは Vue CLI を使用します。これにより、プロジェクトを作成し、プラグインをより簡単に追加できるようになります。

ターミナルに次のコマンドを入力して、新しい VUE3 プロジェクトを作成します:

vue create vue3-app

Vue CLI をインストールして設定していると仮定すると、このコマンドは新しい VUE3 プロジェクトと基本的なファイル構造を作成します。 。

2. 簡単なログイン ページの作成

新しいコンポーネント Login.vue を src/components フォルダーに作成します。 Login コンポーネントには、ユーザーがアプリケーションにログインするためのログイン フォームが含まれます。

<template>
  <form @submit.prevent="login">
    <label for="email">邮箱</label>
    <input type="email" id="email" v-model="email" required>

    <label for="password">密码</label>
    <input type="password" id="password" v-model="password" required>

    <button type="submit">登录</button>
  </form>
</template>

<script>
  import { ref } from 'vue'

  export default {
    name: 'Login',

    setup() {
      const email = ref('')
      const password = ref('')

      const login = () => {
        console.log(`Logging in with email ${email.value} and password ${password.value}`)
      }

      return {
        email,
        password,
        login
      }
    }
  }
</script>

この時点で、ユーザーの電子メールとパスワードを収集し、ユーザーがアプリケーションにログインできるようにする簡単なログイン フォームが完成しました。ここのコードは、Vue.js 3 の複合 API を使用して、コンポーネントの状態と動作をより適切に分離します。

3. 登録ページの作成

新しいコンポーネント Register.vue を src/components フォルダーに作成します。 Register コンポーネントには、ユーザーがアプリケーションを登録して参加するための登録フォームが含まれます。

<template>
  <form @submit.prevent="register">
    <label for="name">姓名</label>
    <input type="text" id="name" v-model="name" required>

    <label for="email">邮箱</label>
    <input type="email" id="email" v-model="email" required>

    <label for="password">密码</label>
    <input type="password" id="password" v-model="password" required>

    <button type="submit">注册</button>
  </form>
</template>

<script>
  import { ref } from 'vue'

  export default {
    name: 'Register',

    setup() {
      const name = ref('')
      const email = ref('')
      const password = ref('')

      const register = () => {
        console.log(`Registering with name ${name.value}, email ${email.value} and password ${password.value}`)
      }

      return {
        name,
        email,
        password,
        register
      }
    }
  }
</script>

同様に、ここではユーザーの名前、電子メール、パスワードを収集するための登録フォームを作成しました。フォームは送信時にコンポーネント メソッドを呼び出し、このデータを登録のためにサーバーに送信します。

4. データ管理ページの作成

新しいコンポーネント Data.vue を src/components フォルダーに作成します。データ コンポーネントには、ユーザーのデータを表示するテーブルが含まれ、データ項目を追加、編集、表示、削除するためのオプションも提供します。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
          <td>
            <button @click="view(item)">查看</button>
            <button @click="edit(item)">编辑</button>
            <button @click="delete(item)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div>
      <button @click="add">添加数据</button>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    name: 'Data',

    setup() {
      const data = ref([
        { id: 1, name: '张三', email: 'zhangsan@abc.com' },
        { id: 2, name: '李四', email: 'lisi@abc.com' },
        { id: 3, name: '王五', email: 'wangwu@abc.com' }
      ])

      const add = () => {
        console.log('Adding a new data item')
      }

      const edit = (item) => {
        console.log(`Editing data item with id ${item.id}`)
      }

      const deleteItem = (item) => {
        console.log(`Deleting data item with id ${item.id}`)
      }

      const view = (item) => {
        console.log(`Viewing data item with id ${item.id}`)
      }

      return {
        data,
        add,
        edit,
        deleteItem,
        view
      }
    }
  }
</script>

このコードでは、ユーザーのデータを表示するデータ テーブルを作成します。このテーブルには、データ項目を追加、表示、編集、削除するための一連のボタンも含まれています。ここではデバッグ情報を出力するだけですが、実際の開発ではこれらの操作をサーバーサイド API にリンクする必要があります。

5. Vue Router を使用してルーティングを実装する

ログイン、登録、データの 3 つのコンポーネントを作成したので、次に、Vue Router を使用してそれらを結合する必要があります。

ターミナルで次のコマンドを実行して、Vue Router をインストールします。

npm install --save vue-router@next

ここでは、@next タグを使用して、Vue.js 3 をインストールしていることを示します。バージョン。

src/router フォルダーに新しいファイル router.js を作成します。

import { createRouter, createWebHistory } from 'vue-router'

import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Data from '../components/Data.vue'

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/data', component: Data }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

このコードでは、3 つのルーティングを含む routes 配列を定義します。 createRouter 関数は、新しいルーティング インスタンスを作成し、他のファイルで使用できるようにエクスポートします。

6. App.vue でのさまざまなコンポーネントの呼び出し

src/App.vue では、Login、Register、および Data コンポーネントを呼び出すためのシンプルなナビゲーション メニューを作成しました。

<template>
  <div id="app">
    <nav>
      <ul>
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/register">注册</router-link></li>
        <li><router-link to="/data">数据</router-link></li>
      </ul>
    </nav>

    <router-view></router-view>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
})
</script>

<style>
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: blue;
}
</style>

ここでは、b988a8fd72e5e0e42afffd18f951b277 コンポーネントを使用してナビゲーション メニューを定義します。

最後に、src/main.js で新しい Vue.js インスタンスを作成し、それを Vue Router にリンクします。

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

さて、シンプルなワンストップ開発ソリューションの計画です。完成しました。上記のコードを使用すると、Web アプリケーションをすばやく構築できます。これらのアプリケーションには、高速レンダリング、最適化されたパフォーマンス、保守しやすいコードなど、Vue.js のすべての利点が備わっています。

以上がVUE3 開発入門チュートリアル: Vue.js を使用してワンストップ開発ソリューションを実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。