En aquesta secció, aprendrem com configurar l'entorn de desenvolupament per començar a treballar amb Vue.js. Això inclou la instal·lació de les eines necessàries i la creació d'un projecte bàsic de Vue.js.

Vue.js requereix Node.js i npm (Node Package Manager) per gestionar les dependències del projecte. Segueix aquests passos per instal·lar-los:

1. Descarrega i instal·la Node.js:

   • Ves a la pàgina oficial de Node.js: https://nodejs.org/
   • Descarrega la versió recomanada per a la majoria d'usuaris.
   • Segueix les instruccions d'instal·lació per al teu sistema operatiu.

2. Verifica la instal·lació:

   • Obre una terminal o línia de comandes.
   • Executa les següents comandes per assegurar-te que Node.js i npm s'han instal·lat correctament:

     node -v
     npm -v
     

   • Hauries de veure les versions instal·lades de Node.js i npm.

Vue CLI (Command Line Interface) és una eina poderosa per inicialitzar i gestionar projectes Vue.js. Per instal·lar Vue CLI, segueix aquests passos:

1. Instal·la Vue CLI globalment:

   • A la terminal, executa la següent comanda:

     npm install -g @vue/cli
     

   • Això instal·larà Vue CLI globalment al teu sistema.

2. Verifica la instal·lació:

   • Executa la següent comanda per assegurar-te que Vue CLI s'ha instal·lat correctament:

     vue --version
     

   • Hauries de veure la versió instal·lada de Vue CLI.

Ara que tenim Vue CLI instal·lat, podem crear un nou projecte Vue.js. Segueix aquests passos:

1. Crea un nou projecte:

   • A la terminal, navega fins al directori on vols crear el teu projecte.
   • Executa la següent comanda per crear un nou projecte:

     vue create my-vue-app
     

   • Substitueix my-vue-app pel nom que vulguis donar al teu projecte.

2. Selecciona les opcions del projecte:

   • Vue CLI et demanarà que seleccionis les opcions per al teu projecte. Pots triar la configuració predeterminada o personalitzar-la segons les teves necessitats.
   • Per a aquest curs, pots seleccionar la configuració predeterminada.

3. Navega fins al directori del projecte:

   • Després de crear el projecte, navega fins al directori del projecte:

     cd my-vue-app
     

4. Inicia el servidor de desenvolupament:

   • Per veure la teva aplicació en acció, inicia el servidor de desenvolupament executant la següent comanda:

     npm run serve
     

   • Això iniciarà el servidor de desenvolupament i podràs veure la teva aplicació a http://localhost:8080.

Un cop creat el projecte, és important entendre l'estructura dels fitxers i directoris. Aquí tens una breu descripció dels elements clau:

• node_modules/: Conté totes les dependències del projecte.
• public/: Conté fitxers estàtics que es copien directament a la carpeta de producció.
• src/: Conté el codi font de l'aplicació.
  • assets/: Conté recursos com imatges i fitxers CSS.
  • components/: Conté els components de Vue.
  • App.vue: El component principal de l'aplicació.
  • main.js: El punt d'entrada de l'aplicació.

Crear una aplicació Vue.js bàsica i verificar que el servidor de desenvolupament funcioni correctament.

1. Instal·la Node.js i npm.
2. Instal·la Vue CLI.
3. Crea un nou projecte Vue.js anomenat my-vue-app.
4. Navega fins al directori del projecte.
5. Inicia el servidor de desenvolupament.
6. Obre http://localhost:8080 al teu navegador i verifica que l'aplicació es carrega correctament.

Ara que has configurat l'entorn de desenvolupament i has creat la teva primera aplicació Vue.js, estàs preparat per començar a explorar els conceptes bàsics de Vue.js en el següent mòdul. Assegura't de familiaritzar-te amb l'estructura del projecte i les eines que has instal·lat, ja que seran fonamentals per al teu desenvolupament amb Vue.js.