miércoles 26 junio 2024

Cómo crear una aplicación con Vue 3

Configuración del Entorno
Crear un Nuevo Proyecto Vue 3
Explorar la Estructura del Proyecto
Iniciar el Servidor de Desarrollo
Crear y Utilizar Componentes

Gestión del Estado con Vuex
Rutas con Vue Router
Estilización y Diseño
Despliegue

Conclusión

Configuración del Entorno

Instalación de Node.js y npm

Primero, necesitas tener Node.js y npm instalados en tu sistema. Puedes descargarlos desde la página oficial de Node.js.

Instalación de Vue CLI

Vue CLI es una herramienta oficial para la configuración y el desarrollo de proyectos Vue.js.

npm install -g @vue/cli

Para verificar la instalación:

vue --version

Crear un Nuevo Proyecto Vue 3

Usa Vue CLI para crear un nuevo proyecto:

vue create my-vue-app

Selecciona las opciones predeterminadas o configura las opciones avanzadas según tus necesidades. Este comando creará una estructura de proyecto básica.

Explorar la Estructura del Proyecto

La estructura del proyecto debería verse así:

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── yarn.lock

Iniciar el Servidor de Desarrollo

Navega al directorio del proyecto y ejecuta el servidor de desarrollo:

cd my-vue-app
npm run serve

Tu aplicación estará disponible en http://localhost:8080.

Crear y Utilizar Componentes

Crear un Componente Nuevo

En la carpeta src/components, crea un nuevo archivo MyComponent.vue:

<template>
  <div>
    <h1>My Component</h1>
    <p>This is a new component!</p>
  </div>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

Usar el Componente en App.vue

Abre src/App.vue y usa el nuevo componente:

<template>
  <div id="app">
    <MyComponent />
  </div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

Gestión del Estado con Vuex

Instalación de Vuex

npm install vuex@next

Configuración de Vuex

Crea un archivo store.js en la carpeta src:

import { createStore } from 'vuex';
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: (state) => state.count
  }
});

Integrar Vuex en la Aplicación

Modifica src/main.js para incluir Vuex:

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');

Uso del Estado en un Componente

Actualiza MyComponent.vue para utilizar el estado de Vuex:

<template>
  <div>
    <h1>My Component</h1>
    <p>This is a new component!</p>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'MyComponent',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

Rutas con Vue Router

Instalación de Vue Router

npm install vue-router@next

Configuración de Rutas

Crea un archivo src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

Integrar Router en la Aplicación

Modifica src/main.js para incluir Vue Router:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
createApp(App).use(router).use(store).mount('#app');

Crear Componentes de Vista

Crea los componentes Home.vue y About.vue en src/components:

Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>

About.vue

<template>
  <div>
    <h1>About</h1>
    <p>This is the about page!</p>
  </div>
</template>
<script>
export default {
  name: 'About'
}
</script>

Actualizar App.vue para las Rutas

Modifica src/App.vue para incluir un router-view:

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

Estilización y Diseño

Puedes agregar estilos globales y específicos de componentes usando las secciones <style> en los archivos .vue. Para estilos globales, puedes usar el archivo src/assets y cargarlo en src/main.js:

import './assets/styles.css';

Despliegue

Para desplegar tu aplicación, primero debes compilarla para producción:

npm run build

Esto generará una carpeta dist que puedes desplegar en cualquier servidor web.

Conclusión

Has creado una aplicación básica en Vue 3 con componentes, gestión del estado con Vuex y enrutamiento con Vue Router. A partir de aquí, puedes seguir explorando y expandiendo tu aplicación con más funcionalidades y estilos.

Etiquetas:

vue javascript

Autor:

Jorge García

Fullstack developer