Introducción a Vue CLI

Alternativamente, se puede usar el comando:

npm init vue@latest

Que nos permite inicializar un proyecto con vite, el cuál es una alternativa a webpack, y como usa esbuild detrás, es más rápido, cambian un poco los scripts para levantar el entorno y compilar, pero personalmente lo prefiero ya que vite junto a pinia y vitest forman parte del nuevo Stack State of the Art de Vue

Abril 2023 Vue recomienda usar npm init vue@latest para la creacion de proyectos

Tres scripsts que ya se van a poder utilizar como comandos

• serve: te va a permitir dar un servidor en modo de desarrollo que por detrás utiliza webpack-dev-server.

• build: te va a permitir crear proyecto todo listo para producción, lo va a traspilar, va convertir la ultima versión de ECMAScript que soporten los navegadores.

• lint: va a corregir cualquier error de sintaxis que se pueda corregir automáticamente o marcarte esos errores.

Me enecanta la metodologia de la profe, estoy haciendo la serie de vue que tiene!!!
Tambien estoy muy emocinado ya que va ser la primera vez que usare vue3, ya que solo he trabajado con vue2.

Súper la versión gráfica de vue-cli desde el navegador!

vue ui

vue ui me parece una joya, no lo conocía

🚀 Lo que verás a continuación son mis apuntes del curso. Si ves algún error o punto de mejora no dudes en hcer tus contribuciones 💚

Todos mis apuntes en mi Github

Introducción

Instalación

npm install -g @vue/cli

Creacion de proyecto con Vue CLI

Para la creación de nuestro primer proyecto ejecutaremos los siguientes comandos

vue create options

Las configuraciones elegidas fueron:
features: Babel, Linter
Version: 3.x
formatter: Prettier

Luego:

cd options
npm run serve

Si queremos generar código para prodcción ejecutamos

npm run build

Con vue ui se puede generar una interfaz para administrar todas las opciones del proyecto

Fuentes de información

• Installation | Vue CLI

• Configuration Reference.

Me aparece la version mas reciente. hay diferencias en algunos nombres de las devDependencias, pero todo funciona igual.

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1"
  }
} 

Este es el comando para ver visualmente las CLI de vue.

vue ui

chulada el comando

vue ui

muy interesante lo del comando vue ui, no sabia que existia esa opcion tan importante

tanto tiempo usando vue y no habia adentrado en vue ui

Para iniciar el servidor:

• React usa npm run server
• Angular usa ng serve
• Vue usa npm run serve

Es interesante cómo inicia cada uno su servidor

Me dio error al typear npm run serve, lo solucione entrando a la carpeta options que creamos desde la terminal, cd options y una vez ahí corrí npm run serve, y listo se soluciono, saludos!

saque un curso en ingles en Udemy, de Vue.js. quiero complementar con los de platzi hasta ahora me encanta la profesora, espero aprender mas y reforzar mis conocimientos.

Me sale un error al ejectuar vue ui:

Por si tienen errores al ejecutar

<
npm run serve
> 

acá unas soluciones https://github.com/vuejs/vue-cli/issues/4900

Introducción a Vue CLI

Install Vue 3

• vue create 'nombre-proyecto' -> Crea un proyecto de vue desde la terminal
• vue ui -> Permite crear un proyecto desde el navegador con una UI, además de hacer modificaciones al mismo

Muchas gracias Diana por esta clase!!! Aprendí mucho de ella.

viendo el acerca de… Vue-cli-ui dice que vue-cli-3.x fue reescrito desde cero y cuenta con nuevas funcionalidades.

Aprovechar lo nuevo de vue-cli para agilizar la creación de proyectos VUE.