Crear proyecto Vue3

En el capítulo anteriorInstalación de Vue3Usamos elnpm initcomando para crear un proyecto. En este capítulo nos centramos principalmente ennpm createel comando para crear proyectos y el uso delvue uicomando para abrir la interfaz gráfica de instalación.

La configuración de IDE recomendada para el desarrollo de Vue esVisual Studio Code + la extensión Vue - Official：

El soporte para otros IDE es el siguiente:

  • Sublime Text a través deLSP-Volares compatible.

  • vim / Neovim a través decoc-volares compatible.

  • emacs a través delsp-modees compatible.

El comando npm create

El comando npm create se utiliza para crear proyectos Vue, normalmente a través de Vite (la herramienta de compilación recomendada oficialmente por Vue) para crear aplicaciones Vue.

En Vite, npm create se utiliza para ejecutar herramientas de andamiaje (como vite@latest) y generar rápidamente una nueva plantilla de proyecto.

Para obtener más detalles sobre Vite, puedes consultar:Tutorial de Vite。

npm createLa sintaxis del comando para crear un proyecto es la siguiente:

npm create vite@latest <project-name> --template vue

Explicación:

  • npm create: Se usa para ejecutar el comando de plantilla del proyecto; crea un nuevo proyecto y lo inicializa desde la plantilla dada.

  • vite@latest: vite es la herramienta para crear proyectos Vue 3,@latestespecifica el uso de la última versión de Vite, asegurando que el proyecto creado se base en la última versión de Vite. Si no se incluye@latest，npmse intentará usar la versión actualmente instalada.

  • <project-name>: Es el nombre de la carpeta del proyecto recién creado. El comando creará una carpeta y colocará el código de plantilla en ella. Por ejemplo, ejecutarnpm create vite@latest my-vue-app --template vuecreará en el directorio actual una carpeta llamadamy-vue-appy colocará en ella los archivos de plantilla del proyecto Vue.

  • --template vue：--template vueEspecifica el tipo de plantilla que se usará. Vite admite múltiples plantillas,vuees la plantilla proporcionada específicamente para Vue 3. Hay otras plantillas, comovanilla、react、svelteetc.

A continuación, creamos el proyecto ejemplo-vue3-app:

npm create vite@latest

Al ejecutar el comando anterior, primero se te pedirá que ingreses el nombre del proyecto y elijas un framework:

> Project name: … ejemplo-vue3-app
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

Vite admite varias plantillas; las comunes son:

  • vue: Proyecto Vue 3 (usa Vue 3 por defecto)
  • vanilla: Plantilla básica sin framework
  • react: Proyecto React
  • svelte: Proyecto Svelte
  • preact: Proyecto Preact
  • También puedes elegir otras plantillas según tus necesidades específicas.

Puedes usar las teclas de dirección para seleccionar. Elegimos Vue, luego aparece la interfaz de variantes de opciones, podemos elegir JavaScript para comenzar rápidamente:

> Project name: … ejemplo-vue3-app
> Select a framework: › Vue
> Select a variant: › JavaScript

Scaffolding project in /Users/ejemplo/ejemplo-test/ejemplo-vue3-app...

Done. Now run:

  cd ejemplo-vue3-app
  npm install
  npm run dev

Una vez completada la instalación, entramos en el directorio del proyecto:

cd ejemplo-vue3-app

La estructura completa del directorio se muestra a continuación:

Instala las dependencias e inicia la aplicación:

npm install
npm run dev

Luego abrehttp://localhost:5173/y verás la interfaz de la aplicación:

Además, podemosvite.config.jsconfigurar nuestro propio puerto en el archivo, por ejemplo, la siguiente configuración establece el puerto en 3000:

Ejemplo

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  server: {
    port: 3000, // El número de puerto que establecemos nosotros
  },
})

El comando vue ui

Además de usarvue createel comando para crear proyectos, también podemos usar la herramienta de creación visual para crear proyectos.

Ejecuta el comando:

$ vue ui
->  Starting GUI...
->  Ready on http://localhost:8000
...

Al ejecutar el comando anterior, aparecerá una interfaz de gestión de proyectos en el navegador:

Podemos hacer clic en la opción"Crear"para crear un proyecto. Selecciona "Crear proyecto aquí" en la parte inferior; también puedes elegir la ruta en la parte superior de la página.

Luego ingresa el nombre de nuestro proyecto, selecciona npm como gestor de paquetes y haz clic en Siguiente:

En la configuración, selecciona la opción predeterminada:

A continuación, espera a que se complete la instalación. La interfaz de gestión después de la instalación es la siguiente:

Otras extensiones