58 votes

Vue JS 2.0 ne rend rien?

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'

69voto

dima Points 595

Juste pour rendre la vie plus facile aux personnes qui cherchent la réponse:

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

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

De l'auteur - version 2.0 autonome signifie (compilateur + runtime). L'exportation par défaut du package NPM sera uniquement à l'exécution, car si vous effectuez l'installation à partir de NPM, vous pré-compilerez probablement les modèles avec un outil de génération.

37voto

gwildu Points 525

Si vous utilisez un outil de construction comme browserify ou Webpack, vous pouvez probablement utiliser seul fichier de composants pour éviter de telles erreurs (dans un seul fichier les composants les modèles sont automatiquement compilés pour rendre fonctions par vueify). Vous avez certainement devriez essayer d'éviter les modèles de n'importe où ailleurs. Consultez le forum et la documentation pour obtenir des réponses sur la façon de les éviter.

Mais je sais par ma propre expérience qu'il n'est pas toujours facile de trouver des modèles dans votre projet, qui sont à l'origine du message d'erreur. Si vous rencontrez le même problème, comme une solution de contournement temporaire, les points suivants devraient vous aider:

Vous ne devrait pas importer "vue/dist/vue.js' (consultez la documentation: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds pourquoi ne pas)

Au lieu de cela vous devez gérer que dans la construction de l'outil que vous utilisez.

Dans mon cas, je suis en utilisant browserify où vous pouvez utiliser aliasify pour la création de l'alias. Ajoutez les lignes suivantes à votre package.json le fichier:

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

pour Webpack les utilisateurs, il semble que vous devez ajouter les lignes suivantes à votre configuration:

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

Plus d'informations peuvent être trouvées dans la documentation: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

1voto

Ehvince Points 1672

Avec le brunch, j'ai résolu ce problème en ajoutant cette règle dans brunch-config.js :

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

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

Il s'agissait de construire un composant Vue avec un <template> intérieur:

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

<script>

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X