0

No logro hacer este ejemplo en mi pc local ejemplo Template, en si quiero crear un template en un archivo aparte donde pueda llamarlo y usarlo en cualquier parte de mi html, con el fin de simplificar codigo, pero no logro hacerlo porque no logro identificar si me faltan otros CDN o que otra cosa debo hacer.

Este es el HTML

<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <app></app>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Este el archivo main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: 'body',
  components: { App }
})

Este es el Template App.vue

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

2
  • Creaste el proyecto con vue-cli? Y si lo hiciste, lo ejecutas con npm run dev? Commented el 4 ene. 2017 a las 14:49
  • Hola Javier, gracias por responder, si instalo vue-cli, por lo que entiendo, instalaría una serie de librerías y dependencias que a la final no sabría cual es la que realmente realiza la acción de lo que estoy buscando. Commented el 26 ene. 2017 a las 14:37

2 respuestas 2

1

No estoy seguro si puede usar este el: 'body', en esta manera. Creo que si pone un <body id="body"> y cambia a el: '#body', talvez sera funca. Si no, hay un plugin para Chrome Devtools que es muy util.

(Perdon mi español)

1
  • Hola user28490, realice tu sugerencia y no funciono. en cuanto al español se entiende!. saludos. Commented el 26 ene. 2017 a las 14:49
0

Para poder usar archivos .vue debes usar un loader con webpack o algún otro bundler.
Con el cli de vue puedes generar un un proyecto que ya implementa toda la configuración de webpack necesaria.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.