¿Cómo reproducir un código vuejs localmente?

Hay un codepen Vuejs que me gustaría correr localmente ()https://codepen.io/team/Vue/pen/oNXaoKy)

Cuando trato de ejecutarlo localmente obtengo un resultado diferente del codepen

vs

El código que tengo localmente:

script.js

const app = Vue.createApp({
  data() {
    return {
      currentTab: 'Home',
      tabs: ['Home', 'Posts', 'Archive']
    }
  },
  computed: {
    currentTabComponent() {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})

app.component('tab-home', {
  template: `
Home component
`
})
app.component('tab-posts', {
  template: `
Posts component
`
})
app.component('tab-archive', {
  template: `
Archive component
`
})

app.mount('#dynamic-component-demo')

index.html

html


  
  
  



 partial:index.partial.html 

  
    {{ tab }}
  

  

 partial 
  

estilo.css

.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.demo-tab {
  border: 1px solid #ccc;
  padding: 10px;
}

¿Alguna idea de dónde voy mal? Sé cómo configurar todo esto con un proyecto vue-cli, pero me gustaría saber cómo configurar ejemplos simples como estos para el prototipado rápido (sin tener que construir proyectos, sólo con archivos simples)

Pregunta hecha hace 3 años, 5 meses, 0 días - Por algorithmadeptc6cb

3 Respuestas:

• Usted tiene que estar seguro de que incluyó los ressources codepen (css, js scripts, etc. links) en su html.

  En el CodePen que desea reproducirse, revise la configuración: el único recurso utilizado es el enlace cdn a la dependencia Vue.

  Este tipo de enlace apunta a un archivo estático, aquí un archivo javascript, para descargarlo manualmente en lugar de utilizar algún administrador de dependencia como npm

  En el de su html, añadir esta línea:

  Respondida el Dec 16, 2020 a las 11:00 - por coderchampion

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema que estás experimentando puede estar relacionado con la forma en que estás cargando Vue y tus componentes en el HTML localmente.

  Aquí hay algunas sugerencias para intentar solucionar el problema:

  • En tu archivo `index.html`, asegúrate de que estás cargando Vue correctamente antes de cargar tu archivo de script local. Puedes hacerlo descargando Vue y guardándolo localmente en tu proyecto, o puedes usar un CDN como lo estás haciendo con el script de Vue actualmente. Asegúrate de que las rutas de tus archivos estén correctas.

  • En `script.js`, asegúrate de que la función `Vue.createApp` esté disponible. En versiones anteriores de Vue 3, puede que necesites importarla de la siguiente manera:

  js
  const { createApp } = Vue;
  const app = createApp({
    // tu código aquí
  });
  

  • Verifica la consola del navegador para ver si hay algún error que pueda estar causando el problema. Puedes abrir la consola presionando F12 en la mayoría de los navegadores y navegar a la pestaña de "Consola".

  • Asegúrate de que tus componentes estén definidos correctamente y que se estén registrando correctamente en la aplicación Vue.

  Siguiendo estas sugerencias, deberías poder ejecutar tu código VueJS localmente y obtener el mismo resultado que en tu CodePen. ¡Espero que esto te ayude a solucionar el problema!

  Respondida el Dec 17, 2020 a las 11:01 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Pasos para ejecutar código Vue.js localmente:

  • Crea un archivo HTML: Crea un archivo HTML simple con la siguiente estructura:

  html
  
  
  
    
    
  
  
    
  
    
  
  
  

  • Crea el archivo script.js: En este archivo, define el código Vue.js de la aplicación:

  javascript
  const app = Vue.createApp({
    // ...
  });
  
  app.mount('app');

  • Sirve los archivos localmente: Usa un servidor web local, como live-server o http-server, para servir los archivos HTML y JS.

  Solución al problema del resultado diferente

  Problema: El código local no muestra los componentes de pestaña dinámicos como el CodePen.

  Causa: El HTML del CodePen incluye un archivo CSS que define los estilos para los componentes de pestaña.

  Solución: Agrega el siguiente archivo CSS a tu proyecto local:

  css
  .tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid 
  ccc;
    cursor: pointer;
    background: f0f0f0;  margin-bottom: -1px;
    margin-right: -1px;
  }
  
  .tab-button:hover {
    background: e0e0e0;}
  
  .tab-button.active {
    background: e0e0e0;}
  
  .demo-tab {
    border: 1px solid 
  ccc;
    padding: 10px;
  }
  

  Resultado: Ahora el código local debería mostrar los componentes de pestaña dinámicos correctamente, como en el CodePen.

  Respondida el Dec 17, 2020 a las 11:11 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---