Configuraci贸n del entorno

3/23
Recursos

Aportes 9

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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/[email protected]"></script>

Chrome extension Vue.js devtools

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.

otra forma de crear un proyecto es usando vite.js

$ npm create [email protected]

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/[email protected]"></script>

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

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

Para ejecutar el archivo en el navegador, podemos usar una extension de visual studio, llamado 鈥淟ive server鈥, asi evitamos entrar carpeta por carpeta. 馃槂

Construcci贸n de App Vue.js con Vite

# La construcci贸n oficial de Vue se configura en base a Vite
npm init [email protected]

# 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/[email protected]鈥></script>

Like馃憤馃憤鉂も潳

Instala Node.js

Vue.js Devtools

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