No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Configuraci贸n del entorno

3/23
Recursos

Aportes 28

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 / YesAdd JSX Support? 鈥 No / YesAdd Vue Router for Single Page Application development? 鈥 No / YesAdd Pinia for state management? 鈥 No / YesAdd Vitest for Unit testing? 鈥 No / YesAdd Cypress for both Unit and End-to-End testing? 鈥 No / YesAdd ESLint for code quality? 鈥 No / YesAdd 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 鈥淟ive 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.

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

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/

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