Vue Academy · Lezione

Configurazione della CLI e dei plugin

Configuri la CLI e aggiunga plugin per estendere il progetto.

Configurazione della CLI e dei plugin è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Configurazione della build

Sia Vue CLI sia Vite consentono di personalizzare la build tramite un file di configurazione.

Vue CLI utilizza vue.config.js
Vite utilizza vite.config.js

Qui può aggiungere plugin, impostare alias, configurare il server di sviluppo e altro ancora.

Nozioni di base su vite.config.js

Un file vite.config.js tipico importa il plugin Vue ed esporta un oggetto di configurazione.

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

Nozioni di base su vue.config.js

Nei progetti Vue CLI, vue.config.js esporta la configurazione nello stesso modo.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

Aggiunta di plugin

I plugin estendono la build con nuove funzionalità.

Li installi con npm
Li importi nel file di configurazione
Li aggiunga all'array plugins

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

Variabili d'ambiente

Memorizzi nei file .env la configurazione che cambia tra un ambiente e l'altro.

.env viene caricato in ogni ambiente
.env.development viene utilizzato solo durante lo sviluppo
.env.production viene utilizzato per le build di produzione

Definizione delle variabili d'ambiente

In Vite, le variabili devono avere il prefisso VITE_ per essere esposte al codice client.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Lettura delle variabili d'ambiente

In Vite, acceda alle variabili esposte tramite import.meta.env.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

Nota di sicurezza sulle variabili d'ambiente

Tutto ciò che viene esposto al codice client è visibile nel browser.

Non inserisca mai segreti come chiavi API private nelle variabili VITE_
Qui devono essere presenti solo configurazioni pubbliche e non sensibili
Conservi i segreti reali sul server

Alias dei percorsi

Un alias abbrevia i percorsi degli import. Quello più comune associa @ alla cartella src.

In questo modo evita percorsi relativi fragili come ../../components.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

Utilizzo dell'alias

Una volta configurato, importi da @/ invece di utilizzare percorsi relativi.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

Opzioni del server di sviluppo

Il file di configurazione consente anche di regolare il server di sviluppo:

port: la porta su cui ascoltare
open: apre automaticamente il browser
proxy: inoltra le richieste API per evitare CORS

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Verifica rapida

Verifichi la comprensione della configurazione di Vite.

Riepilogo: configurazione e plugin

Ha imparato a configurare un progetto Vue:

vite.config.js o vue.config.js contengono le impostazioni
Aggiunga i plugin all'array plugins
Utilizzi i file .env con il prefisso VITE_
Li legga tramite import.meta.env
Imposti l'alias @ per ottenere import più puliti

Prossimo argomento: sintassi dei template e associazione dei dati.

Domande Frequenti

La lezione «Configurazione della CLI e dei plugin» è gratuita?

Sì — il testo completo di «Configurazione della CLI e dei plugin» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Configurazione della CLI e dei plugin»?

Configuri la CLI e aggiunga plugin per estendere il progetto. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.

Quanto tempo richiede la lezione «Configurazione della CLI e dei plugin»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Installazione di Vue CLI
Struttura del progetto generato
Configurazione della CLI e dei plugin

← Torna a Vue Academy