Tutoriel d'introduction au développement VUE3 : utiliser Vue.js pour obtenir une solution de développement unique

Vue.js est un framework JavaScript populaire qui simplifie considérablement le processus de création d'applications Web. Vue.js applique le modèle MVC au développement Web. Il combine des idées de rendu déclaratif et de composantisation, permettant aux développeurs de créer des applications Web plus rapidement et plus facilement. Cet article présentera VUE3, une nouvelle version du framework Vue.js, et utilisera VUE3 pour implémenter une solution de développement unique.

1. Introduction au framework VUE3

Vue.js est un framework JavaScript créé par You Yuxi. Son objectif est d'aider les développeurs à créer des composants Web réutilisables en fournissant une API simple.

Vue.js fournit une architecture MVC de base. Dans ce cadre, les développeurs peuvent utiliser la syntaxe déclarative de Vue.js pour décrire le comportement et l'état des composants de l'interface utilisateur.

Vue.js 3 est la dernière version du framework Vue.js. Il a apporté de nombreuses améliorations en termes de performances et de lisibilité, et a également renforcé les capacités de débogage et de test des développeurs, ce qui sera plus important dans le futur développement Web.

2. Caractéristiques du framework VUE3

La chose la plus remarquable à propos du framework VUE3 est ses performances Par rapport à la version précédente de VUE2, VUE3 a considérablement amélioré le traitement du DOM virtuel et peut mettre à jour le DOM plus efficacement, en réduisant. Temps de rendu et utilisation de la mémoire.

Deuxièmement, VUE3 améliore également la prise en charge de TypeScript. TypeScript peut être utilisé pour détecter les erreurs lors de l'écriture de code, améliorant ainsi considérablement la maintenabilité de l'application.

Le framework VUE3 fournit également une nouvelle API de composition et déplace le compilateur de modèles dans un package séparé. Cela permet aux développeurs de mieux séparer l’état de l’interface utilisateur et simplifie le développement du framework.

3. Solution de développement unique

Maintenant, nous allons utiliser VUE3 pour mettre en œuvre une solution de développement simple et unique. Dans cette application, nous mettrons en œuvre la connexion, l'enregistrement et la gestion simple des données.

1. Créer un nouveau projet VUE3

Tout d'abord, nous devons installer Vue.js. Ici, nous utilisons Vue CLI, qui nous permet de créer des projets et d'ajouter des plug-ins plus facilement.

Entrez la commande suivante dans le terminal pour créer un nouveau projet VUE3 :

vue create vue3-app

En supposant que Vue CLI soit installé et configuré, cette commande créera un nouveau projet VUE3 et une structure de fichiers de base.

2. Créez une page de connexion simple

Créez un nouveau composant Login.vue dans le dossier src/components. Le composant de connexion contiendra un formulaire de connexion permettant aux utilisateurs de se connecter à l'application.

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

À ce stade, nous disposons d'un simple formulaire de connexion qui collecte l'e-mail et le mot de passe de l'utilisateur et permet à l'utilisateur de se connecter à l'application. Le code ici utilise l'API de composition de Vue.js 3 pour mieux séparer l'état et le comportement des composants.

3. Créez une page d'inscription

Créez un nouveau composant Register.vue dans le dossier src/components. Le composant Registre contiendra un formulaire d'inscription permettant aux utilisateurs de s'inscrire et de rejoindre l'application.

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

De même, nous avons créé ici un formulaire d'inscription pour collecter le nom, l'e-mail et le mot de passe de l'utilisateur. Le formulaire appellera une méthode de composant lors de la soumission pour envoyer ces données au serveur pour enregistrement.

4. Créez une page de gestion des données

Créez un nouveau composant Data.vue dans le dossier src/components. Le composant Données contiendra un tableau qui affiche les données de l'utilisateur et fournira également des options pour ajouter, modifier, afficher et supprimer des éléments de données.

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

Dans ce code, nous créons un tableau de données pour afficher les données de l'utilisateur. Le tableau contient également un ensemble de boutons permettant d'ajouter, d'afficher, de modifier et de supprimer des éléments de données. Ici, nous produisons simplement quelques informations de débogage, mais dans le développement réel, nous devons lier ces opérations à l'API côté serveur.

5. Utilisez Vue Router pour implémenter le routage

Maintenant que nous avons créé trois composants Login, Register et Data, nous devons ensuite utiliser Vue Router pour les assembler.

Exécutez la commande suivante dans le terminal pour installer Vue Router :

npm install --save vue-router@next

Ici, nous utilisons la balise @next pour indiquer que nous installons la version Vue.js 3. @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

Créez un nouveau fichier router.js dans le dossier src/router :

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

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

Dans ce code, nous définissons le tableau routes, qui contient trois routes. La fonction createRouter crée une nouvelle instance de route et l'exporte pour l'utiliser dans d'autres fichiers.

Appelez divers composants dans App.vue🎜🎜🎜Dans src/App.vue, nous avons créé un menu de navigation simple pour appeler les composants de connexion, d'enregistrement et de données. 🎜rrreee🎜Ici, nous utilisons le composant b988a8fd72e5e0e42afffd18f951b277 pour définir le menu de navigation. 🎜🎜Enfin, dans src/main.js, nous créons une nouvelle instance Vue.js et la lions au Routeur Vue : 🎜rrreee🎜Maintenant, notre solution de développement simple et unique est terminée. En utilisant le code ci-dessus, vous pouvez créer rapidement des applications Web, et ces applications bénéficieront de tous les avantages de Vue.js, notamment un rendu rapide, des performances optimisées et un code maintenable. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!