Scribd
Cargar
204 vistas12 páginas

Guia de Inicio Vue3

1. Descarga e instala Node.js y el Vue CLI para crear proyectos Vue. Crea un nuevo proyecto Vue y ejecútalo localmente con npm run dev. 2. Agrega el plugin Quasar al proyecto Vue mediante el comando "vue add quasar". Comenta ciertas líneas en styles y main.js para solucionar errores. 3. Usa App.vue como plantilla principal importando RouterView y renderizándola, para iniciar la programación del proyecto Vue con Quasar.

Cargado por

Cuenta Apoyo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
204 vistas12 páginas

Guia de Inicio Vue3

1. Descarga e instala Node.js y el Vue CLI para crear proyectos Vue. Crea un nuevo proyecto Vue y ejecútalo localmente con npm run dev. 2. Agrega el plugin Quasar al proyecto Vue mediante el comando "vue add quasar". Comenta ciertas líneas en styles y main.js para solucionar errores. 3. Usa App.vue como plantilla principal importando RouterView y renderizándola, para iniciar la programación del proyecto Vue con Quasar.

Cargado por

Cuenta Apoyo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

1. Actualizar o instalar Node.

js descargando el instalador desde su pagina

https://nodejs.org/es
Aceptas el administrador de cambios de Windows, después saldrá esto

Tarda varios minutos


Ver versión de node desde cmd node -v

2. Instalar globalmente la última versión del Vue CLI (que es una interfaz gráfica para
crear proyectos vue sin comandos):

npm install -g @vue/cli

Te deberá salir actualizada la última versión del CLI vue --version

3. Crear tu primer proyecto vue3


3.1. Crear una carpeta en alguna ruta de tu pc para tu proyecto, esta fue mi ruta

C:\Users\jakqu\Desktop\Jakqui Capacitacion\proyectos-vue\vue3>cd primer-proyecto-casa

3.2. Con CMD o visual estudio estar dentro de la carpeta y poner el siguiente comando:

npm init vue@latest

Poner y (solo lo pedirá las primeras veces)


3.2.1. nombre de tu proyecto y otras características, solo router y pinia llegaran yes

3.2.2. Después harás los 3 comandos que aparecen en verde, install tardara un rato
ya que descargara varios recursos necesarios

3.2.3. Con npm run dev correrás tu proyecto y ya tendras tu primer proyecto en vue3
Hasta aquí ya tienes tu primer proyecto vue corriendo, si accedes desde tu navegador a la ruta que
te aparece podrás ver algo como lo siguiente:
4. Agregar quasar como plugin a vue

>vue add quasar

Si sale el siguiente error

Desde powershell como administrador ejecutar lo siguiente, esto es porque se requiere habilitar la
ejecución de scripts desde línea de comandos

>Set-ExecutionPolicy -Scope CurrentUser unrestricted


Volver a instalar quasar

>vue add quasar

Todo se realizó satisfactoriamente

Correr proyecto de nuevo

>npm run dev


Saldrá un error que es normal

Y se soluciona de la siguiente manera:

 En la carpeta styles comentar las siguientes líneas


Y en main.js comentar la primera línea y agregar la segunda:

import 'quasar/dist/quasar.sass'

App.vue se recomienda partir de lo siguiente, aunque App.vue se usa como la plantilla de todas las
vistas, por si se desea usar una misma vista dentro del proyecto:

<script setup>
  import { RouterView } from 'vue-router'
</script>
<template>
    <RouterView/>
</template>

A partir de aquí inicia la programación de tu proyecto.

También podría gustarte