Vue JS 2.0 no representa nada?

Usando Vue (^2.0.0-rc.6) + Browserify, el punto de entrada es index.js: 

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

new Vue({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})

App.vue: 

<template>
  <div id="root">
    <hello></hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Hola.vue: 

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

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

Pantalla blanca en blanco, ¿me he perdido algo?

EDITAR:

La entrada html es simplemente <div id="root"></div>, sin errores en los registros de la consola, y estoy bastante seguro de Hola.vue se carga desde console.log('test') ese archivo aparece en la consola.

EDITAR 2:

Encontrado el error:

[Vue warn]: Está utilizando la compilación de Vue solo en tiempo de ejecución donde el la opción plantilla no está disponible. Ya sea pre-compilar las plantillas en funciones de renderizado, o utilice la compilación incluida en el compilador. (encontrado en componente anónimo-utilice la opción" nombre " para una mejor depuración mensaje.)

¿Significa esto que tengo que usar la solución webpack? No se puede usar HTML estándar?

SOLUCIÓN : Importar Vue desde ' vue / dist / vue.js "

Author: Bert, 2016-09-14
Source

3 answers

Solo para hacer la vida más fácil para la gente que busca la respuesta: 

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

new Vue({
  el: '#app',
  render: h => h(App)
})

Del autor means 2.0 significa compilación independiente (compilador + tiempo de ejecución). La exportación predeterminada del paquete NPM será solo en tiempo de ejecución, porque si instala desde NPM, es probable que compile previamente las plantillas con una herramienta de compilación.

 40
Author: dima,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-23 03:03:55

Si está utilizando una herramienta de compilación como browserify o Webpack, lo más probable es que pueda usar componentes de un solo archivo para evitar tales errores (en componentes de un solo archivo, las plantillas se compilan automáticamente para procesar las funciones de vueify). Definitivamente debes tratar de evitar las plantillas en cualquier otro lugar. Consulte el foro y la documentación para obtener respuestas sobre cómo evitarlos.

Pero sé por mi propia experiencia que no siempre es fácil encontrar las plantillas en su proyecto, que se causando el mensaje de error. Si usted está teniendo el mismo problema, como una solución temporal, lo siguiente debería ayudar:

No debe importar 'vue/dist/vue.js ' (comprobar la documentación: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds por qué no)

En su lugar, debe manejar eso en la herramienta de compilación que está utilizando.

En mi caso, estoy usando browserify donde puedes usar aliasify para crear el alias. Agregue lo siguiente su archivo package.json: 

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Para los usuarios de Webpack, parece que debe agregar lo siguiente a su configuración:

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},

Puedes encontrar Más información en la documentación: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

 26
Author: gwildu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-14 13:03:33

Con Brunch Resolví esto agregando esta regla en brunch-config.js: 

  npm: {
    aliases: {
      vue: "vue/dist/vue.js"
    }
  }

Véase http://brunch.io/docs/config#npm

Era construir un componente Vue con un interior <template>: 

<template>
  <div> hello </div>
</template>

<script>

 export default {
   name: 'Hello',
   props: {
     title: String,
   },
 }
</script>
 0
Author: Ehvince,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-01 00:37:46