How to make Template with Vue.js

0

I can not do this example on my local PC Example Template , if I want to create a template in a separate file where I can call it and use it in any part of my html, in order to simplify code, but I can not do it because I can not identify if I'm missing other CDNs or what else I should do.

This is the 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>

This is the main.js file

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

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

This is the Template App.vue

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

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

<style scoped>
h1 {
  color: red;
}
</style>
    
asked by Miguel Arias 04.12.2016 в 00:06
source

2 answers

1

I'm not sure if you can use this el: 'body', in this way. I think that if you put a <body id="body"> and change to el: '#body', it may be funca. If not, there is a Chrome Devtools plugin that is very useful.

(Sorry my Spanish)

    
answered by 24.01.2017 в 18:30
0

To be able to use .vue files you must use a loader with webpack or some other bundler.
With the cli de vue you can generate a project that already implements all the necessary webpack configuration.

    
answered by 03.12.2018 в 01:58