Configuración del entorno de desarrollo para Vue 3

Introducción

Este artículo guía a los desarrolladores que inician con Vue 3 desde la creación de un entorno de trabajo moderno, ofreciendo las mejores prácticas de integración de herramientas para optimizar el aprendizaje y la eficiencia en el desarrollo de proyectos.

¡El tutorial completo de integración con las últimas versiones de Vite 5 ya está disponible!

Instalación y configuración de Node.js

Descarga e instalación

La versión de Node debe seleccionarse considerando la compatibilidad con las herramientas y marcos más recientes. Es recomendable revisar los requisitos mínimos de Node especificados en el archivo package.json de los proyectos en GitHub. Por ejemplo, el siguiente constructor Vite requiere "node": "^18.0.0 || >=20.0.0"; el marco UI Element Plus para Vue 3 necesita "node": ">= 18"; y la herramienta de verificación de estilos Stylelint requiere "node": ">=18.12.0".

Basándose en estos requisitos, se recomienda instalar la versión LTS más reciente del分支 principal 18, en este caso node-v18.20.4-x64.msi. La instalación es directa: doble clic, siguiente, siguiente. Como ubicación personalizada se puede establecer d:\Programas\node\nodejs\. El instalador agrega automáticamente esta ruta a la variable de entorno PATH del sistema, permitiendo usar los comandos node y npm desde cualquier ubicación en la terminal.

Por defecto, npm instala los paquetes de terceros en ~/AppData/Roaming/npm, donde ~ representa el directorio del usuario, y también configura esta ruta automáticamente en las variables de entorno del usuario.

Personalización del directorio de npm

Si se desea cambiar el directorio predeterminado de npm, posiblemente para ahorrar espacio en el disco del sistema, se pueden crear dos carpetas personalizadas y ejecutar los siguientes comandos:

# Configurar directorio para módulos de terceros
npm config set prefix "D:\Programas\node\npm"

# Configurar directorio de caché de npm
npm config set cache "D:\Programas\node\npm-cache"

Después, reemplazar en las variables de entorno del usuario la entrada de PATH que apunta a la ruta de npm por D:\Programas\node\npm.

Cambio del registro de npm

Para facilitar las descargas, se recomienda instalar una herramienta de gestión de registros como nrm:

npm i -g nrm

Uso:

# Listar registros disponibles
nrm ls

# Cambiar al registro de taobao
nrm use taobao

Creación de proyecto con Vite

Se opta por el andamiaje de Vite debido a su configuración mínima y velocidad de compilación superiores. Para crear un proyecto Vue, ejecutar:

# Acceder al directorio de trabajo
cd E:\vue_learning\code\001_hello_vue

# Crear proyecto con la última versión
npm create vite@latest

Seleccionar Vue con TypeScript durante el proceso interactivo para generar un proyecto moderno.

Ejecución del proyecto

# Instalar dependencias
cd E:\vue_learning\code\001_hello_vue\proyecto
npm i

# Iniciar servidor de desarrollo
npm run dev

Acceder a http://localhost:5173/ para visualizar la página de bienvenida.

Entorno de desarrollo integrado

Selección del IDE

Se recomienda WebStorm por su inteligencia y productividad superior en desarrollo web. Descargar la versión más reciente del sitio oficial y proceder con la instalación en la ubicación deseada, creando un acceso directo en el escritorio.

Para abrir proyectos directametne con clic derecho, configurar las opciones de integración del sistema operativo durante la instalación.

Configuración inicial

Al abrir un proyecto por primera vez,可以选择不 importar configuración previa. Activar la versión de prueba de 30 días y confiar en el proyecto cuando se solicite. Posteriormente, realizar ajustes básicos:

  • Acceder a File | Settings para configurar tamaños de fuente
  • Personalizar atajos de teclado según preferencias
  • Crear ejecutables npm rápidos para comandos frecuentes

Extensiones necesarias

Las extensiones fundamentales como Vue.js, ESLint, Stylelint, Less, Sass y Tailwind ya están incluidas en WebStorm. Adicionalmente, se puede instalar la extensión Translator para facilitar la lectura de documentación en inglés.

Estructura del proyecto Vue

Directorio public

Contiene recursos estáticos publicados en el sitio. Es el lugar apropiado para practicar con archivos que no requieren procesamiento durante la compilación.

Puntos de entrada de la aplicación

index.html serve como punto de acceso a la aplicación de página única. En Vite, los archivos de módulo pueden referenciarse directamente con etiquetas <script type="module">, funcionalidad compatible con todos los navegadores modernos.

src/main.ts es el punto de inicio de la aplicación. En este archivo se crea una instancia de Vue basada en el componente raíz App y se monta en un elemanto DOM. También es el lugar para importar estilos globales y registrar componentes de manera global.

src/assets es un directorio reservado para recursos estáticos que requieren procesamiento durante el build, como imágenes y fuentes.

src/style.css contiene los estilos globales generados por defecto. La organización de estilos globales y de componentes queda a criterio del desarrollador.

src/vite-env.d.ts utiliza la sintaxis de comentario reference para incluir declaraciones de tipos TypeScript de recursos estáticos como imágenes y archivos de estilo.

Los archivos src/App.vue y src/components/*.vue definen los componentes de la aplicación. App.vue es el componente raíz donde típicamente se declaran las etiquetas de rutas para implementar navegación con Vue Router. Los componentes de página suelen separarse de los componentes UI, ubicando los primeros en src/views y los segundos en src/components. A diferencia de Vue 2, Vue 3 permite escribir scripts en formato setup utilizando la Composition API para simplificar el desarrollo de componentes. Vite también soporta archivos JSX y TSX para una renderización de plantillas más flexible, y su integración es directa.

Archivo package.json

La propiedad "type": "module" indica que el proyecto utiliza ES Modules.

Scripts disponibles:

  • dev: Inicia un servidor local con soporte de reemplazo de módulos en caliente
  • build: Genera los archivos para producción
  • preview: Previsualiza la estructura y código resultantes del build

Dependencias de producción: únicamente Vue, en su versión más reciente 3.4.29.

Dependencias de desarrollo:

  • vite: Paquete principal de Vite
  • @vitejs/plugin-vue: Plugin que integra soporte Vue 3 en Vite, configurado en vite.config.ts
  • typescript: Paquete central de TypeScript, actualmente en versión 5.2 o superior
  • vue-tsc: Compilador de TypeScript que soporta sintaxis TS dentro de componentes Vue

Configuración de TypeScript

El andamiaje de Vite genera dos archivos de configuración: tsconfig.node.json contiene las opciones de compilación para los módulos del propio Vite, archivos como vite.config.ts; tsconfig.app.json define las opciones para los archivos TypeScript relacionados con la aplicación Vite, incluyendo archivos .ts, .tsx y .vue.

La documentación de cada opción está disponible pasando el cursor sobre la clave de configuración correspondiente.

Archivo vite.config.ts

Este archivo conteine la configuración completa de la herramienta de andamiaje Vite. La configuración mínima generada únicamente incluye el plugin Vue para soportar la carga y compilación de archivos Vue. En artículos posteriores se abordará la configuración de plugins adicionales para implementar más funcionalidades.

Integración de JSX

Para desarrolladores acostumbrados a React, escribir JSX ofrece una experiencia excelente. Gracias al soporte de los plugins Vue de Vite, es posible crear componentes utilizando código estilo JSX. Para convertir App.vue al formato más simple App.tsx:

import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, contexto) {
    console.log(props, contexto)
    return () => (
      <div>Hola TSX</div>
    )
  }
})

En main.ts, importar App como import App from './App', donde la extensión .tsx puede obviarse.

Si aparece un error de compilación, agregar "jsxImportSource": "vue" en las opciones del compilador de tsconfig.app.json y reiniciar WebStorm.

Al iniciar el servidor de desarrollo, puede surgir otro error que requiere instalar y configurar el plugin @vitejs/plugin-vue-jsx:

npm i -D @vitejs/plugin-vue-jsx

Agregar la configuración en vite.config.ts:

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

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

Reiniciar el servidor y verificar que todo funcione correctamente.

Integración de ESLint y Prettier

En entornos de desarrollo colaborativo, mantener un estilo de código unificado facilita la comprensión del código por parte de otros desarrolladores y reduce los conflictos al enviar cambios al repositorio.

La configuración de ESLint ha cambiado en las versiones más recientes. La última versión soporta configuración estilo flat, pero al probarla se encontró incompatibilidad con el plugin vite-plugin-eslint, que no se ha actualizado en más de dos años. Por esta razón, se mantiene la configuración tradicional de ESLint.

Dependencias requeridas

  • eslint@8.57.0: Paquete principal de ESLint
  • @typescript-eslint/parser@7.10.0: Analizador de sintaxis TypeScript para ESLint
  • @typescript-eslint/eslint-plugin@7.10.0: Plugin para verificación de código TypeScript
  • eslint-plugin-vue@9.22.0: Plugin para verificación de archivos Vue
  • vite-plugin-eslint@1.8.1: Plugin para integrar ESLint con Vite
  • prettier@3.2.5: Paquete principal de Prettier
  • eslint-plugin-prettier@5.1.3: Plugin para integrar Prettier con ESLint
  • eslint-config-prettier@9.1.0: Desactiva reglas conflictivas entre ESLint y Prettier

Instalación

npm i -D eslint@8.57.0 @typescript-eslint/parser@7.10.0 @typescript-eslint/eslint-plugin@7.10.0 eslint-plugin-vue@9.22.0 vite-plugin-eslint@1.8.1 prettier@3.2.5 eslint-plugin-prettier@5.1.3 eslint-config-prettier@9.1.0

Configuración de ESLint

Crear archivo .eslintrc.json con el siguiente contenido:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "vue", "prettier"],
  "rules": {}
}

La configuración especifica el entorno de ejecución, las reglas predefinidas en orden de prioridad, el analizador Vue con opciones basadas en la versión más reciente de ECMAScript y módulos ES. Los plugins adicionales están declarados para ejecutar verificaciones específicas.

Configuración de Prettier

Crear archivo .prettierrc.cjs:

module.exports = {
  printWidth: 150,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: "as-needed",
  jsxSingleQuote: true,
  trailingComma: "none",
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: "always",
  rangeStart: 0,
  rangeEnd: Infinity,
  requirePragma: false,
  insertPragma: false,
  proseWrap: "preserve",
  htmlWhitespaceSensitivity: "css",
  vueIndentScriptAndStyle: false,
  endOfLine: "auto"
}

Activación del plugin en Vite

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

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      lintOnStart: true,
      fix: true
    })
  ]
})

El plugin vite-plugin-eslint puede generar errores de compilación TypeScript. Para resolverlo, editar su archivo package.json y cambiar "import": "./dist/index.mjs" por:

"import": {
 "types": "./dist/index.d.ts",
 "default": "./dist/index.mjs"
}

Utilisation

Hay dos formas de aplicar ESLint: mediante/scripts de línea de comandos o usando el plugin de WebStorm.

Agregar en package.json:

{
  "scripts": {
    "lint": "eslint src --ext .js,.cjs,.vue,.ts,.jsx,.tsx --ignore-path .gitignore --fix",
    "format": "prettier --write \"./**/*.{html,vue,ts,js,cjs,tsx,jsx,json,md}\""
  }
}

También se puede configurar el plugin de ESLint directamente en WebStorm para verificación en tiempo real.

Integración de Stylelint

Stylelint se integra de manera similar a ESLint, proporcionando verificación de código CSS y preprocessadores como SCSS y Less.

Integración de TailwindCSS

El uso de TailwindCSS como herramienta de estilos atómicos permite obtener beneficios significativos: reutilización de estilos, compilación eficiente y extensión flexible, elementos que incrementan considerablemente la productividad en el desarrollo de componentes.

La documentación detallada se publicará en una actualización próxima.

Publicado el 7-25 06:24

Etiquetas populares

©2026 Friki Work