web-dev-qa-db-fra.com

Vue JS 2.0 ne rend rien?

Utilisation de Vue (^ 2.0.0-rc.6) + Browserify, le 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>

Hello.vue:

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

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

Écran blanc, ai-je oublié quelque chose?

MODIFIER:

L'entrée html est simplement <div id="root"></div>, pas d'erreur dans les journaux de la console et je suis presque sûr que Hello.vue est chargé depuis que console.log('test') ce fichier apparaît sur la console.

EDIT 2:

Trouvé l'erreur:

[Vue warn]: Vous utilisez la version de Vue uniquement au moment de l'exécution, où le L'option de modèle n'est pas disponible. Soit pré-compiler les modèles dans les fonctions de rendu, ou utilisez la compilation incluse dans le compilateur. (trouvé dans composant anonyme - utilisez l'option "name" pour un meilleur débogage des messages )

Est-ce que cela signifie que je dois utiliser la solution webpack? Vous ne pouvez pas utiliser le HTML standard?

SOLUTION: Importer Vue de 'vue/dist/vue.js'

javascriptvue.jsvuejs2browserifybabel
36
user2002495

Simplement pour rendre la vie plus facile aux personnes qui recherchent 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 à l'aide d'un outil de construction.

51
dima

Si vous utilisez un outil de construction tel que browserify ou Webpack, vous pouvez probablement utiliser composants à fichier unique pour éviter de telles erreurs (dans les composants à fichier unique, les modèles sont automatiquement compilés pour permettre le rendu des fonctions par vueify). Vous devriez certainement essayer d'éviter les modèles ailleurs. Consultez le forum et la documentation pour savoir comment les éviter.

Mais je sais par expérience qu’il n’est pas toujours facile de trouver les modèles dans votre projet qui sont à l’origine du message d’erreur. Si vous rencontrez le même problème, en guise de solution de contournement temporaire, voici ce qui devrait vous aider:

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

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

Dans mon cas, j'utilise browserify, où vous pouvez utiliser aliasify pour créer l'alias. Ajoutez les éléments suivants à votre fichier package.json:

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

pour les utilisateurs de Webpack, il semble que vous deviez ajouter les éléments suivants à votre configuration:

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

Vous trouverez plus d’informations dans la documentation: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

28
gwildu

Pour Vue 3.4.0 Vous pouvez ajouter un nouveau fichier dans le répertoire racine du projet nommé

vue.config.js et ajoutez le texte suivant.

module.exports = {
  runtimeCompiler: true
}

La prochaine fois que vous démarrez l'application, vous pouvez voir

Compilé avec succès en 204ms
20:46:46

App running at:
0
Krishnadas PC

Avec 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

C'était pour construire un composant Vue avec un <template> intérieur:

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

<script>

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