Crear un proyecto con Vuetify ​

by Manolo Garcia on 2023-03-21T76:47

Vuetify es un framework de componentes de Material Design para Vue.js.

En este tutorial, aprenderemos cómo crear un proyecto basico con Vuetify desde cero.

Requisitos previos ​

Antes de comenzar, asegúrate de tener instalados los siguientes elementos:

1. Node.js y npm
2. Vue CLI

Instalar Vue CLI ​

Si aún no tienes Vue CLI instalado, ejecuta el siguiente comando:

npm install -g @vue/cli

Crear un nuevo proyecto de Vue ​

Ejecuta el siguiente comando para crear un nuevo proyecto de Vue:

vue create mi-proyecto-vuetify

Reemplaza mi-proyecto-vuetify con el nombre que desees para tu proyecto. A continuación, navega a la carpeta del proyecto:

cd mi-proyecto-vuetify

Instalar Vuetify ​

Para instalar Vuetify, ejecuta el siguiente comando:

vue add vuetify

Durante la instalación, te preguntarán qué configuración de Vuetify deseas usar. Puedes seleccionar la configuración predeterminada o personalizarla según tus necesidades.

Usar Vuetify en tu proyecto ​

Ahora que Vuetify está instalado, puedes comenzar a usar sus componentes en tu aplicación. Abre el archivo src/App.vue y reemplaza su contenido con el siguiente código:

<template>
  <v-app>
    <v-main>
      <v-container fluid>
        <h1>¡Bienvenido a tu proyecto con Vuetify!</h1>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Ejecutar el proyecto ​

Para ver tu proyecto en acción, ejecuta el siguiente comando:

npm run serve

Abre tu navegador y visita http://localhost:8080/ para ver tu nueva aplicación Vue con Vuetify.

¡Felicitaciones! Has creado con éxito un proyecto Vue con Vuetify.

Ahora puedes explorar la documentación de Vuetify para aprender más sobre los componentes disponibles y cómo personalizar el tema de tu aplicación.