En aquesta secció, aprendrem a crear la nostra primera aplicació Vue des de zero. Aquest procés inclou la configuració inicial del projecte, la creació de components bàsics i la comprensió de com Vue.js gestiona les dades i els esdeveniments.

Vue CLI és una eina poderosa que ens permet crear i gestionar projectes Vue.js de manera eficient. Per instal·lar Vue CLI, necessitem tenir Node.js i npm (Node Package Manager) instal·lats al nostre sistema.

1. Instal·la Vue CLI globalment:

   npm install -g @vue/cli
   

2. Verifica la instal·lació:

   vue --version
   

1. Crea un nou projecte:

   vue create my-first-vue-app
   

   Durant aquest procés, Vue CLI et demanarà que seleccionis una configuració predeterminada o personalitzada. Per a aquest exemple, seleccionarem la configuració predeterminada.

2. Navega al directori del projecte:

   cd my-first-vue-app
   

3. Inicia el servidor de desenvolupament:

   npm run serve
   

   Ara, si obres el teu navegador i vas a http://localhost:8080, hauràs de veure la pàgina d'inici predeterminada de Vue.

Un cop creat el projecte, és important entendre l'estructura dels fitxers i directoris:

• public/: Conté fitxers estàtics com index.html.
• src/: Conté el codi font de l'aplicació.
  • assets/: Conté recursos com imatges i estils.
  • components/: Conté components Vue.
  • App.vue: Component principal de l'aplicació.
  • main.js: Punt d'entrada de l'aplicació.

El fitxer App.vue és el component principal de la nostra aplicació. Comencem per modificar-lo per veure com funciona.

1. Obre App.vue i modifica el contingut:

   <template>
     <div id="app">
       <h1>Hola, món!</h1>
       <p>Aquesta és la meva primera aplicació Vue.</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>
   

2. Guarda els canvis i observa el resultat al navegador.

1. Crea un nou fitxer HelloWorld.vue dins del directori components:

   <template>
     <div class="hello">
       <h2>{{ msg }}</h2>
     </div>
   </template>
   
   <script>
   export default {
     name: 'HelloWorld',
     props: {
       msg: String
     }
   }
   </script>
   
   <style scoped>
   .hello {
     color: #42b983;
   }
   </style>
   

2. Importa i utilitza el nou component en App.vue:

   <template>
     <div id="app">
       <h1>Hola, món!</h1>
       <p>Aquesta és la meva primera aplicació Vue.</p>
       <HelloWorld msg="Benvingut a Vue.js!" />
     </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld.vue'
   
   export default {
     name: 'App',
     components: {
       HelloWorld
     }
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>
   

3. Guarda els canvis i observa el resultat al navegador.

En aquesta secció, hem après a:

• Configurar un nou projecte Vue utilitzant Vue CLI.
• Entendre l'estructura bàsica d'un projecte Vue.
• Crear i modificar components Vue.

Ara que tens una comprensió bàsica de com crear una aplicació Vue, estàs preparat per aprofundir en els conceptes bàsics de Vue.js en el següent mòdul.