Creare progetti con VUE JS da riga di comando senza buttare il PC dalla scogliera

React, Angular, Vue sono strumenti indispensabili richiesti per il ruolo di programmatore front-end. Il modo migliore per rompere le difficoltà di apprendimento è buttarsi in acqua è provare a nuotare perchè la difficoltà senza un approccio pratico per costruire progetti come si dice in gergo “miagolerebbe nel buio”. Quando si crea una nuova app Vue, il modo migliore per iniziare e utilizzare rapidamente è utilizzare l’interfaccia della riga di comando di Vue. Piuttosto che iniziare tutto da zero come facevano i web designer vecchio stampo, da Common Line Interface avrai a disposizione una serie di strumenti che ti consentiranno di ottenere un AMBIENTE PREFIGURATO. In questo tutorial vediamo quindi come installare il tutto per partire con i nostri progetti con questa tecnologia che tra le varie in Javascript lato server ha la curva di apprendimento meno complicata rispetto all’ acquisizione di strumenti monolitici e maggiormente impegnativi nella comprensione come Angular. La Vue CLI è uno strumento completo per lo sviluppo e la prototipazione rapida di Vue.js, procediamo nella pratica. Per procedere abbiamo bisogno di avere installato sulla nostra macchina la somma divinità NODE: https://nodejs.org/en/ in quanto offre la gestione dei pacchetti da installare con il noto node packager manager, NPM. Da finestra window richiamabile tramite il comando CMD da esegui creiamo prima una cartella sul desktop con nome arbitrario del tipo progettovue poi ci si posiziona all’ interno della directory con il famoso comando dos CD (change directory) e infine digitiamo:

npm install -g @vue/cli

A questo punto per controllare quale versione di vue/cli ho installato digito il comando:

vue–version

e ottengo la seguente risposta:

“vue–version” non è riconosciuto come comando interno o esterno, un programma eseguibile o un file batch. Questo perchè semplicemente ho sbagliato a digitare perché i comandi richiedono una sintassi molto precisa, quindi dopo aver corretto in vue –version aggiungendo lo spazio, avrò ottenuto a video:

@vue/cli 4.3.1

A questo punto curiosi non possiamo che correre avedere il contenuto della nostra cartella sul desktop creata precedentemente e ci accorgiamo che è vuota, come può essere possibile? La nostra cartella progettovue creata prima è vuota ladies e gentleman! Ma certo, quando abbiamo impartito il comando npm install -g @vue/cli non abbiamo preconfigurato all’ istante il software necessario per VUARE (neologismo?) ma ci siamo solo messi nella condizione di avere gli strumenti utili necessari per procedere poi con l’avvio di un progetto, quindi come faccio a creare un progetto? Digitiamo quindi quando siamo posizionati in desktop il comando, dove il comando example-vue-project è il nostro nome arbitrario che possiamo modificare a piacimento:

vue create example-vue-project

dopo parecchio avremo a disposizione il famoso coltellino svizzero all’ interno della cartella che adesso è diventata magicamente piena di strutture, directory, relazioni, figle di configurazione etc etc. Durante l’installazione abbiamo due opzioni, lasciando il predefinito di default installeremo due plug-in molto importanti: Babel per la traduzione di JavaScript moderno ed ESLint per garantire la qualità del codice. Se invece vogliamo personalizzare l’installazione ricordiamoci che vue/cli ci mette a disposizione numerosi altri plug-in come:

TypeScript
Progressive Web App support
Vue Router
Vuex(Vue’s official state management library)
CSS Pre-processors (PostCSS,CSS modules,Sass,Less&Stylus)
Linter/ Formatter usingESLintandPrettier
Unit Testing usingMochaorJest
E2E Testing usingCypressorNightwatch

A questo punto verrebbe da chiederci che cosa abbiamo fatto fino a questo punto. Ebbene qualcosa di pratico è stato ottenuto. Posizioniamoci all’ interno della directory con il comando cd example-vue-project dopodichè digitiamo questo potentissimo elisir:

npm run serve

 

alla fine di questa operazione la finestra a riga dic omando sputerà fuori un link, che è quello localhost con una porta attaccata da cui faremo un copia e incolla su un browser qualsiasi. Dopo aver digitato invio il nostro navigatore preferito visualizzerà il primo passo per un uomo, ma grande per l’umanità. Ovviamente non è proprio così ma rende bene l’idea. Siamo riusciti a completare il primo step per imparare VUe, nel senso che abbiamo tutta l’impalcatura pronta per mettere in piedi la cupola del Brunelleschi. Adesso il vero problemaè un altro come si costruisce la cupola del Brunelleschi in Vue? Ipotizziamo infine che siamo riusciti a costruire la cupola. La cartella contiene quasi cento mega di materiale come posso solo pensare di trasferire tutte queste dipendenze su Aruba o qualsiasi altro fornitore di spazio web con un simile flusso di dipendenze? Niente paura c’è un comando che mette in piedi solo l’essenziale per la pubblicazione e cioè:

npm run build

Questo genererà tutto in una cartella DIST all’interno del tuo progetto. Alla fine dell’ esecuzione la CLI è così gentile da dirci anche che ulteriori ragguagli sono fruibili all’ indirizzo: https://cli.vuejs.org/guide/deployment.html. All’ interno della DIST avrò tutto, ovviamente lanciando la pagina html vedrò il nulla se il progetto è vuoto ma nella DIST c’è quello che serve da pubblicare! Proviamo a questo punto a dare il seguente comando:

vue inspect

quello che verrà generato a video è la mappa delle reference usate da vue nel suo progetto che non è proprio uguale al contenuto del file package,json presente nella root della cartella, che noi sappiamo essere il pannello di controllo centrale dell’ intera applicazione in quanto consente di gestire come un motore l’intera struttura di dipendenze. Il servizio CLI Vue è una dipendenza runtime (@ vue / cli-service) che estrae il webpack e fornisce configurazioni predefinite. Può essere aggiornato, configurato ed esteso con plugin. Fornisce script multipli per lavorare con progetti Vue, come gli script serve, costruisci e ispeziona. Abbiamo già visto il servizio e creato script in azione. Lo script inspect consente di ispezionare la configurazione del webpack in un progetto con vue-cli-service. Come puoi vedere, questo produce molto output. Più avanti vedremo come modificare la configurazione del webpack in un progetto CLI Vue. Un progetto Vue generato con l’interfaccia della riga di comando ha una struttura predefinita che aderisce alle migliori pratiche. Se si sceglie di installare plugin aggiuntivi (come il router Vue), la CLI creerà anche i file necessari per utilizzare e configurare queste librerie. Diamo un’occhiata ai file e alle cartelle importanti in un progetto Vue quando si utilizza il predefinito:

public . This folder contains public files like index.html and favicon.ico . Any static assets placed here will simply be copied and not go through webpack.
src . This folder contains the source files for your project. Most work will be done here.
src/assets . This folder contains the project’s assets such as logo.png .
src/components . This folder contains the Vue components.
src/App.vue . This is the main Vue component of the project.
src/main.js . This is the main project file which bootstraps the Vue application.
babel.config.js . This is a configuration file for Babel.
package.json . This file contains a list of the project’s dependencies, as well as the configuration options for ESLint, PostCSS and supported browsers.
node_modules . This folder contains the installed npm packages.

Vue CLI v3 è progettato pensando all’architettura del plugin. In questa sezione, esamineremo quali sono i plug-in e come installarli nei tuoi progetti. Vedremo anche alcuni plugin popolari che possono aiutare ad aggiungere funzionalità avanzate installando automaticamente le librerie richieste e configurando varie impostazioni, che altrimenti dovrebbero essere eseguite manualmente. Plugin CLI sono solo pacchetti npm che forniscono funzionalità aggiuntive al tuo progetto Vue. Il binario vue-cli-service risolve automaticamente e carica tutti i plugin elencati nel file package.json. La configurazione di base per un progetto Vue CLI 3 è webpack e Babel. Tutte le altre funzionalità possono essere aggiunte tramite plugin. Esistono plugin ufficiali forniti dal team Vue e plugin della comunità sviluppati dalla comunità. I nomi dei plug-in ufficiali iniziano con @ vue / cli-plugin- e i nomi dei plug-in della comunità iniziano con vue-cli-plugin-.

I plugin ufficiali di Vue CLI 3 includono:

Typescript
PWA
Vuex
Vue Router
ESLint
Unit testing etc.

I plugin vengono installati automaticamente durante la creazione del progetto o esplicitamente installati successivamente dallo sviluppatore. È possibile installare molti plug-in integrati in un progetto durante l’inizializzazione del progetto e installare qualsiasi altro plug-in aggiuntivo nel progetto utilizzando il comando vue add my-plugin in qualsiasi punto del progetto. Puoi anche installare plugin con preset e raggruppare i tuoi plugin preferiti come preset riutilizzabili che puoi utilizzare in seguito come base per altri progetti.Esistono molti plug-in VI CLI che potresti trovare utili per i tuoi prossimi progetti:

vue-cli-plugin-nuxt: un plugin CLI Vue per creare rapidamente un’applicazione Vue universale con Nuxt.js

vue-cli-plugin-bootstrap: un plug-in VI CLI per l’aggiunta di Bootstrap 4 al progetto

il webpack viene estratto dall’interfaccia della riga di comando di Vue e dalle diverse API fornite per accedere e modificare la configurazione del webpack. La maggior parte della configurazione del progetto per Vue CLI viene astratta in plug-in e viene unita alla configurazione di base in fase di esecuzione. Ma in alcune situazioni potresti voler modificare manualmente la configurazione del webpack per il tuo progetto. In tal caso, puoi creare un file vue.config.js nella radice del progetto e quindi effettuare qualsiasi configurazione all’interno di un’opzione configureWebpack:

module.exports = {
configureWebpack: {
// custom config here
}
}

Ma se volessi usare una interfaccia grafica ho qualcosa per soddisfare le mie esigenze? Digitare il comando:

vue ui

alla fine della fiera la finestra dos mostrerà il link dove il tutto è disponibile di norma all’ indirizzo http://localhost:8000/project/select . Tutta la parte di sviluppo grafico sarà trattata in uno dei futuri articoli di Vue presenti sui portali Umbriaway Consulting, al momento per iniziare c’è tanta birra sul fuoco (ma era così?).

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Blog su WordPress.com.

Su ↑

%d blogger hanno fatto clic su Mi Piace per questo: