Einführungs-Tutorial zur VUE3-Entwicklung: Verwenden Sie Vue.js, um eine Entwicklungslösung aus einer Hand zu erhalten

Vue.js ist ein beliebtes JavaScript-Framework, das den Prozess der Erstellung von Webanwendungen erheblich vereinfacht. Vue.js wendet das MVC-Muster auf die Webentwicklung an. Es kombiniert deklaratives Rendering und Komponentenisierungsideen und ermöglicht es Entwicklern, Webanwendungen schneller und einfacher zu erstellen. In diesem Artikel wird VUE3, eine neue Version des Vue.js-Frameworks, vorgestellt und VUE3 zur Implementierung einer One-Stop-Entwicklungslösung verwendet.

1. Einführung in das VUE3-Framework

Vue.js ist ein von You Yuxi erstelltes JavaScript-Framework. Ziel ist es, Entwicklern beim Erstellen wiederverwendbarer Webkomponenten durch die Bereitstellung einer einfachen API zu helfen.

Vue.js bietet eine grundlegende MVC-Architektur. Im Rahmen dieses Frameworks können Entwickler die deklarative Syntax von Vue.js verwenden, um das Verhalten und den Status von UI-Komponenten zu beschreiben.

Vue.js 3 ist die neueste Version des Vue.js-Frameworks. Es hat viele Verbesserungen in Bezug auf Leistung und Lesbarkeit mit sich gebracht und außerdem die Debugging- und Testfunktionen für Entwickler gestärkt, was in der zukünftigen Webentwicklung noch wichtiger sein wird.

2. Funktionen des VUE3-Frameworks

Das Bemerkenswerteste am VUE3-Framework ist seine Leistung. Im Vergleich zur vorherigen Version von VUE2 hat VUE3 die Verarbeitung des virtuellen DOM erheblich verbessert und kann das DOM effektiver aktualisieren Renderzeit und Speichernutzung.

Zweitens verbessert VUE3 auch die TypeScript-Unterstützung. TypeScript kann zum Erkennen von Fehlern beim Schreiben von Code verwendet werden, wodurch die Wartbarkeit der Anwendung erheblich verbessert wird.

Das VUE3-Framework bietet außerdem eine neue Kompositions-API und verschiebt den Vorlagen-Compiler in ein separates Paket. Dadurch können Entwickler den Status besser von der Benutzeroberfläche trennen und die Framework-Entwicklung vereinfachen.

3. One-Stop-Entwicklungslösung

Jetzt werden wir VUE3 verwenden, um eine einfache One-Stop-Entwicklungslösung zu implementieren. In dieser Anwendung implementieren wir die Anmeldung, Registrierung und einfache Datenverwaltung.

1. Erstellen Sie ein neues VUE3-Projekt

Zuerst müssen wir Vue.js installieren. Hier verwenden wir Vue CLI, mit dem wir Projekte einfacher erstellen und Plug-Ins hinzufügen können.

Geben Sie im Terminal den folgenden Befehl ein, um ein neues VUE3-Projekt zu erstellen:

vue create vue3-app

Vorausgesetzt, Sie haben die Vue-CLI installiert und eingerichtet, erstellt dieser Befehl ein neues VUE3-Projekt und eine grundlegende Dateistruktur.

2. Erstellen Sie eine einfache Anmeldeseite.

Erstellen Sie eine neue Komponente Login.vue im Ordner src/components. Die Anmeldekomponente enthält ein Anmeldeformular, mit dem sich Benutzer bei der Anwendung anmelden können.

<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>

Zu diesem Zeitpunkt haben wir ein einfaches Anmeldeformular, das die E-Mail-Adresse und das Passwort des Benutzers erfasst und es dem Benutzer ermöglicht, sich bei der Anwendung anzumelden. Der Code hier verwendet die Composition API von Vue.js 3, um Komponentenstatus und -verhalten besser zu trennen.

3. Erstellen Sie eine Registrierungsseite

Erstellen Sie eine neue Komponente Register.vue im Ordner src/components. Die Registrierungskomponente enthält ein Registrierungsformular, mit dem sich Benutzer registrieren und der Anwendung beitreten können.

<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>

Ähnlich haben wir hier ein Registrierungsformular erstellt, um den Namen, die E-Mail-Adresse und das Passwort des Benutzers zu erfassen. Das Formular ruft bei der Übermittlung eine Komponentenmethode auf, um diese Daten zur Registrierung an den Server zu senden.

4. Erstellen Sie eine Datenverwaltungsseite.

Erstellen Sie eine neue Komponente Data.vue im Ordner src/components. Die Datenkomponente enthält eine Tabelle, die die Daten des Benutzers anzeigt und außerdem Optionen zum Hinzufügen, Bearbeiten, Anzeigen und Löschen von Datenelementen bereitstellt.

<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>

In diesem Code erstellen wir eine Datentabelle, um die Daten des Benutzers anzuzeigen. Die Tabelle enthält außerdem eine Reihe von Schaltflächen zum Hinzufügen, Anzeigen, Bearbeiten und Löschen von Datenelementen. Hier geben wir nur einige Debugging-Informationen aus, aber in der tatsächlichen Entwicklung müssen wir diese Vorgänge mit der serverseitigen API verknüpfen.

5. Verwenden Sie Vue Router, um das Routing zu implementieren

Da wir nun die drei Komponenten „Anmeldung“, „Registrierung“ und „Daten“ erstellt haben, müssen wir sie als Nächstes mit Vue Router zusammenfügen.

Führen Sie den folgenden Befehl im Terminal aus, um Vue Router zu installieren:

npm install --save vue-router@next

Hier verwenden wir das Tag @next, um anzugeben, dass wir die Vue.js 3-Version installieren. @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

在这个代码中，我们定义了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

Erstellen Sie eine neue Datei router.js im Ordner src/router:

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

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

In diesem Code definieren wir das Array routes, das drei Routen enthält. Die Funktion createRouter erstellt eine neue Routeninstanz und exportiert sie zur Verwendung in anderen Dateien.

Verschiedene Komponenten in App.vue aufrufen🎜🎜🎜In src/App.vue haben wir ein einfaches Navigationsmenü zum Aufrufen von Anmelde-, Registrierungs- und Datenkomponenten erstellt. 🎜rrreee🎜Hier verwenden wir die Komponente b988a8fd72e5e0e42afffd18f951b277, um das Navigationsmenü zu definieren. 🎜🎜Schließlich erstellen wir in src/main.js eine neue Vue.js-Instanz und verknüpfen sie mit dem Vue-Router: 🎜rrreee🎜Jetzt ist unsere einfache One-Stop-Entwicklungslösung fertig. Mit dem oben genannten Code können Sie schnell Webanwendungen erstellen, und diese Anwendungen verfügen über alle Vorteile von Vue.js, einschließlich schnellem Rendering, optimierter Leistung und wartbarem Code. 🎜

Das obige ist der detaillierte Inhalt vonEinführungs-Tutorial zur VUE3-Entwicklung: Verwenden Sie Vue.js, um eine Entwicklungslösung aus einer Hand zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!