L'aide de Vue (^2.0.0-rc.6) + Browserify, point d'entrée est 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>
Bonjour.vue:
<template>
<div class="hello">
<h1>\{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>
Écran blanc vide, ai-je raté quelque chose?
EDIT:
L'entrée html est juste <div id="root"></div>
, pas d'erreurs sur les journaux de la console, et je suis sûr que Bonjour.vue est chargé depuis console.log('test')
le fichier s'affiche sur la console.
EDIT 2:
Trouvé l'erreur:
[Vue avertir]: Vous utilisez le uniquement à l'exécution de construire de Vue où l' modèle option n'est pas disponible. Soit pré-compiler les templates dans le rendu de fonctions, ou d'utiliser le compilateur inclus construire. (qui se trouve dans anonyme composant - utiliser le champ "nom" pour une meilleure mise les messages.)
Cela signifie que je dois utiliser webpack solution? Ne peuvent pas utiliser la norme HTML?
SOLUTION: Importation de Vue de "vue/dist/vue.js'