javascript - template - vue single file components

¿Vue JS 2.0 no rinde nada?

Question

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>

Hello.vue:

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

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

Pantalla en blanco en blanco, ¿me perdí algo?

EDITAR:

La entrada html es simplemente <div id="root"></div> , no hay errores en los registros de la consola, y estoy bastante seguro de que Hello.vue está cargado desde console.log(''test'') ese archivo aparece en la consola.

EDIT 2:

Encontró el error:

[Vue warn]: está utilizando la compilación de Vue solo en tiempo de ejecución donde la opción de plantilla no está disponible. Pre-compile las plantillas en funciones de representación, o use la compilación incluida en el compilador. (se encuentra en el componente anónimo; use la opción "nombre" para depurar mejor los mensajes).

¿Esto significa que tengo que usar la solución webpack? ¿No puedes usar HTML estándar?

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

Answer 1

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

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

ver http://brunch.io/docs/config#npm

Era para construir un componente Vue con un <template> interno:

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

<script>

 export default {
   name: ''Hello'',
   props: {
     title: String,
   },
 }
</script>

Answer 2

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 los componentes de un solo archivo, las plantillas se compilan automáticamente para representar funciones mediante 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 están causando el mensaje de error. Si tiene el mismo problema, como una solución temporal, lo siguiente debería ayudar:

No debe importar ''vue / dist / vue.js'' (consulte la documentación: github.com/vuejs/vue/wiki/… 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 a su archivo package.json :

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

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

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

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

Answer 3

Solo para hacer la vida más fácil para las personas que buscan la respuesta:

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

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

Desde el autor: 2.0 medios de compilación independientes (compilador + tiempo de ejecución). La exportación predeterminada del paquete NPM será solo en tiempo de ejecución, ya que si realiza la instalación desde NPM, es probable que compile las plantillas con una herramienta de compilación.