Tutoriel sur les bases de Vue.js. Comment commencer avec ce framework ?

Comment démarrer avec Vue.js ?

La méthode la plus recommandée pour créer le Vue.js projet est Vue CLI. Pour l'installer, il suffit de taper

npm install -g @vue/cli


et créez un projet :

vue create simple-project
 cd ./simple-projet

Enfin, vous pouvez exécuter votre projet :

npm run serve

Créer un composant simple

Grâce à webpack et au plugin vue-loader, nous pouvons créer des composants en .vue des fichiers. Chaque composant comprend le modèle avec une vue HTML, un scénario avec logique et style avec un style CSS.

Créons un simple VArticle.vue composant en simple-project/src/components/VArticle.vue et le contenu suivant :

<div class="article">
<h1 class="article__title">(( article.title ))</h1>
<p><span class="article__author"><br>(( article.auteur ))<br></span></p>
<p class="article__lead">(( article.lead ))</p>
</div>
</>

Pour utiliser un composant créé précédemment, nous devons définir les paramètres suivants simple-project/src/App.vue le contenu du fichier à :

<div>
<div>&nbsp;</div>
</div>
</>

Désormais, lorsque vous ouvrez un navigateur sur http://localhost:8080/ vous devriez voir apparaître un écran comme celui-ci :

Quelle est la prochaine étape ?

Dans ce tutoriel, j'ai essayé de vous montrer comment commencer votre aventure avec le framework Vue. Si vous êtes curieux de savoir comment créer des composants plus avancés, vous les trouverez certainement dans notre open source vuelendar projet.