Tutoriel sur les bases de Vue.js. Comment commencer avec ce framework ?
Lukasz Usarz
Senior Software Engineer
Vue.js est un cadre progressif qui facilite la création d'applications web. Il vous permet de composer des interfaces utilisateur complexes à partir de petits morceaux de code isolés appelés "composants". Les vues déclaratives rendent votre code plus prévisible et plus facile à déboguer.
Comment démarrer avec Vue.js ?
La méthode la plus recommandée pour créer le Vue.jsprojet est le CLI de Vue. 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 :
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> </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.