Configuración del entorno

Hola, para los que busquen el CDN que uso la profe, resulta que ha cambiado un poco la vista de la página de Vue.js. Entonces les dejo el script para que puedan colocarlo en su HTML.

<script src="https://unpkg.com/vue@next"></script>

si bien vue-cli es la opción de tooling que más se usa, el mismo Evan You recomienda usar Vite, una herramienta de tooling que el mismo desarrolló y al parecer es más rápida. Espero que Platzi se anime pronto a hacer un curso de Vite, ya que no solo tiene soporte pra Vue sino para varios frameworks y librerías.

Chrome extension Vue.js devtools

Construcción de App Vue.js con Vite

# La construcción oficial de Vue se configura en base a Vite
npm init vue@latest

# Debemos responder a varias preguntas de configuración
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formating? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

# Nos movemos al proyecto
cd <your-project-name>

# Instalamos dependencias
npm install

# Corremos el servidor en Modo Desarrollo
npm run dev

# Enviar la App a Producción
npm run build

# La construcción de la App lista para Producción se crea en el directorío
./dist

El sitio StackBlitz ofrece la configuración de Vue.js con Vite desde el navegador sin usar nada local, solo el navegador. Así que si quieren usar Vue.js sin instalar nada, allí tienen una opción.

Extension: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=es

Comando: npm install -g @vue/cli

CDN: <script src=“https://unpkg.com/vue@next”></script>

Like👍👍❤❤

Para ejecutar el archivo en el navegador, podemos usar una extension de visual studio, llamado “Live server”, asi evitamos entrar carpeta por carpeta. 😃

otra forma de crear un proyecto es usando vite.js

$ npm create vite@latest

Sin herramientas de compilación#

Para comenzar con Vue sin un paso de compilación, simplemente copie el siguiente código en un archivo HTML y ábralo en su navegador:

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Instala Node.js

Vue.js Devtools

npm i -g vue-cli -> Instala la Comand Line Interface de Vue.

https://devtools.vuejs.org/

ok, recien empiezo y ya no encuentro esas hermosas dev tools en la pagina de vue …

La página de vue ya es muy diferente y estoy algo perdido. En el quick start de vue dice que puedo iniciar a usa vue corriendo este comando en el cmd -> npm init vue@latest ?

Empecemos con esto. Me han dicho que Vue es el entorno mas facil para empezar con el front, vamos viendo

El sitio ha cambiado, en este momento estos son los enlaces:

• https://vuejs.org/guide/scaling-up/tooling.html#browser-devtools

• https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Rápida y sencilla guía de instalación de Node Js
Instalar Node

Dentro de poco sale el curso de Vite.js gente:
https://platzi.com/cursos/vitejs/

https://vuejs.org/guide/quick-start.html#using-vue-from-cdn

<script src=“https://unpkg.com/vue@3/dist/vue.global.js”></script>

Aqui esta es script mas actualizado para la gente que no le funcione

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Me gustan los elementos visuales que aporta en los videos para entender los conceptos y cómo sintetiza el contenido!

recuerden que en mac se debe de utilizar sudo y el comando en caso de que solicite permiso de admin

también se puede trabajar en ambiente web como por ejemplo en CODEPEN

El sitio sigue en constante cambio, ahora se encuentra en este sitio 👀

npm install vue

la opción para el editor de código ya esta igual, y ahora no veo esa opción para ejecutar el comando. de CLI

<script src=“https://unpkg.com/vue@3/dist/vue.global.js”></script>
Vuejs v3

Para la version vue3 este es el cdn:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Epaaaaaaaa

que empiece lo chido