Tutorial sulle basi di Vue.js. Come iniziare con questo framework?

Come iniziare con Vue.js?

Il modo più consigliato per creare il file Vue.js progetto è Vue CLI. Per installarlo basta digitare:

npm install -g @vue/cli


e poi creare un progetto:

vue crea progetto semplice
 cd ./progetto semplice

Infine, è possibile eseguire il progetto:

npm run serve

Creare un semplice componente

Grazie a webpack e al plugin vue-loader possiamo creare i componenti in .vue file. Ogni componente include il modello con una vista HTML, un copione con logica e stile con lo stile CSS.

Creiamo semplici VArticolo.vue componente in simple-project/src/components/VArticle.vue e il seguente contenuto:

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

Per utilizzare un componente creato in precedenza, occorre impostare simple-project/src/App.vue contenuto del file a:

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

Ora, quando si apre un browser su http://localhost:8080/ dovrebbe apparire una schermata del tipo:

Cosa c'è dopo?

In questo tutorial ho cercato di mostrarvi come iniziare la vostra avventura con il framework Vue. Se siete curiosi di sapere come creare componenti più avanzati, li troverete sicuramente nel nostro open source vuelendar progetto.