Comment utiliser vue juste après la mise à jour

Vue.js est un framework front-end populaire, et sa dernière version, Vue 3.0, a été officiellement publiée en septembre 2020. La nouvelle version apporte des changements majeurs, notamment de meilleures performances, une meilleure prise en charge de TypeScript et un moyen plus simple d'écrire du code. Cet article présentera comment les débutants peuvent utiliser Vue.js 3.0.

1. Installez Vue.js 3.0

Avant de commencer à utiliser Vue 3.0, nous devons d'abord installer Vue.js. Vue 3.0 peut être installé via npm.

Nous pouvons ouvrir une fenêtre de console et y entrer la commande suivante :

npm install vue@next

Cela installera Vue.js 3.0 localement. Nous pouvons vérifier notre version Vue.js installée à tout moment en utilisant la commande suivante :

vue --version

2. Créez une application Vue.js

Nous pouvons utiliser Vue CLI 4 pour créer une nouvelle application Vue.js. Vue CLI 4 est un outil d'interface de ligne de commande qui peut nous aider à générer un squelette de projet, à fournir une configuration prête à l'emploi et à créer rapidement une application Vue.js.

Si vous n'avez pas encore installé Vue CLI 4, ouvrez une fenêtre de console et entrez la commande suivante :

npm install -g @vue/cli

Pendant le processus d'installation, il peut vous être demandé de saisir votre mot de passe administrateur.

Une fois l'installation terminée, nous pouvons créer une nouvelle application Vue.js. Veuillez entrer la commande suivante dans la fenêtre de la console :

vue create my-vue-app

Cette commande créera un nouveau projet nommé "my-vue-app". Lors de la création du projet, vous pouvez choisir d'utiliser les paramètres par défaut ou de les modifier selon vos besoins.

3. Exécutez l'application Vue.js

Après avoir terminé la création de l'application Vue.js, nous pouvons entrer dans le répertoire racine de l'application et exécuter la commande suivante pour démarrer le serveur de développement :

cd my-vue-app
npm run serve

Cette commande démarrera un service Web local afin que vous puissiez exécuter votre application Vue.js sur votre machine locale.

Entrez http://localhost:8080/ dans votre navigateur pour ouvrir l'application.

4. Commencez à écrire des applications Vue.js

Maintenant, nous sommes prêts à commencer à écrire des applications Vue.js. Dans Vue.js 3.0, la façon dont vous définissez votre application est légèrement différente qu'auparavant.

Voici un exemple simple qui affichera un bouton et lorsque vous cliquerez dessus, un message s'affichera à l'écran :

<template>
  <div>
    <button @click="showMessage">显示消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: ''
    })

    function showMessage() {
      state.message = '欢迎来到 Vue 3.0!'
    }

    return {
      ...state,
      showMessage
    }
  }
}
</script>

Vous pouvez copier et coller ce code dans le fichier my-vue-app/src/App.vue puis enregistrez le fichier.

Pendant que l'application est en cours d'exécution, vous verrez un bouton. Lorsque vous cliquez sur le bouton, un message apparaîtra à l'écran indiquant "Bienvenue dans Vue 3.0 !".

5. Résumé

Vue.js 3.0 apporte de nombreuses améliorations et modifications pour rendre le framework plus facile à utiliser et plus efficace. Dans cet article, nous avons expliqué comment installer et utiliser Vue 3.0, et comment écrire des applications à l'aide de la nouvelle syntaxe Vue.js 3.0. J'espère que cet article vous a été utile et commencez à créer votre prochaine application Web avec Vue.js 3.0 !

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!