2. Creazione di un ambiente di lavoro

Riprendiamo l’ambiente di lavoro descritto in dettaglio nel documento [2]:

Visual Studio Code (VSCode) per scrivere i codici JavaScript;
[node.js] per eseguirli;
[npm] per scaricare e installare le librerie JavaScript di cui avremo bisogno;

Creiamo un ambiente di lavoro in [VSCode]:

in [1-5], apriamo una cartella vuota [vuejs] in [VSCode];

in [8-10], si installa la dipendenza [@vue/cli] che ci consentirà di inizializzare un progetto [vue.js]. Questa dipendenza comporta l’installazione di un gran numero di pacchetti (diverse centinaia);

Nello stesso terminale, si digita quindi il comando [vue create .] che richiede di creare un progetto [vue.js] nella cartella corrente (.) :

in [13], viene avviata una serie di domande che servono a configurare il progetto;

una volta fornite le risposte a tutte le domande, vengono scaricati nuovi pacchetti e viene generato un progetto nella cartella corrente [14].

Vediamo cosa è stato generato. Il file [package.json] è il seguente:


{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Commenti

righe 14-22: tra le dipendenze necessarie allo sviluppo si notano riferimenti ai due strumenti [eslint, babel] già utilizzati nei due capitoli precedenti. A questi si aggiungono i plugin di questi due strumenti destinati all'utilizzo all'interno di [vue.js];
riga 34: è il pacchetto [babel-eslint] che effettuerà la transpilazione da ES6 a ES5 dei codici jS;
righe 5-9: sono state create tre attività [npm]:
- [build]: serve a creare la versione compilata del progetto pronta per l’entrata in produzione;
- [serve]: esegue il progetto su un server web. È con questo strumento che vengono effettuati i test durante lo sviluppo. Come nel caso di [webpack-dev-server], una modifica al codice sorgente del progetto provoca automaticamente la ricompilazione del progetto e il suo ricaricamento da parte del server web;
- [lint]: serve ad analizzare i codici jS e a generare report. In questa sede non utilizzeremo questo strumento;

È stato generato un file [README.md] con il seguente contenuto:

# vuejs

## Configurazione del progetto
```
npm install
```

### Compilazione e ricaricamento a caldo per lo sviluppo
```
npm run serve
```

### Compilazioni e minificazione per la produzione
```
npm run build
```

### Esegui i test
```
npm run test
```

### Controlli di sintassi e correzioni dei file
```
npm run lint
```

### Personalizza la configurazione
See [Configuration Reference](https://cli.vuejs.org/config/).

Questo file riassume i comandi da utilizzare per gestire il progetto.

Sappiamo che in [VSCode] vengono proposte per l’esecuzione le attività [npm]:

in [1-3], eseguiamo il comando [serve] che compilerà e poi eseguirà il progetto [4-5];

Da URL a [http://localhost:8080], otteniamo la seguente pagina:

Spiegheremo più avanti cosa ha portato alla creazione di questa pagina.

Continuiamo a configurare il nostro ambiente di lavoro:

nel [2] sopra riportato, vediamo alcuni indicatori [git]. [git] è un gestore di codice sorgente che consente di gestire le versioni successive dello stesso e di condividerle tra gli sviluppatori. Disattiveremo questo strumento per il progetto;
in [3-5], accediamo alle proprietà del progetto;

in [9-10], disattiviamo l'utilizzo di [git] nel progetto;

Scriveremo diversi test per illustrare il funzionamento di [vue.js]. Non vogliamo però creare ogni volta un nuovo progetto, poiché in tal caso dovremmo generare ogni volta una cartella [node_modules], che occupa diverse centinaia di megabyte. Torniamo alle attività [npm] del file [package.json]:


  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

riga 2: il comando [serve] utilizza per impostazione predefinita:
- il file [public/index.html];
- associato al file [src/main.js];

Alla riga 2 è possibile specificare nel comando [serve] il punto di ingresso del progetto, ad esempio:


"serve": "vue-cli-service serve vuejs-00/main.js",

Proviamo:

in [1], la cartella [src] è stata rinominata in [vuejs-00];
in [2-3], è stato modificato il comando [serve];
in [4-6], si esegue il progetto;

Si ottiene lo stesso risultato di prima:

Per i nostri test, procederemo quindi in questo modo:

scrivendo il codice in una cartella [vuejs-xx] del progetto;
test di questo progetto con il comando [vue-cli-service serve vuejs-xx/main.js] nel file [package.json];

Quando il server di sviluppo è in esecuzione, qualsiasi modifica a uno dei file del progetto provoca una ricompilazione. Per questo motivo, disabilitiamo la modalità [Auto Save] di [VSCode]. Infatti, non vogliamo che avvenga una ricompilazione ogni volta che si digitano caratteri in uno dei file del progetto. Vogliamo che la ricompilazione avvenga solo in determinati momenti:

in [2], l’opzione [Auto Save] non deve essere selezionata;