web-dev-qa-db-ja.com

Vue JS 2.0は何もレンダリングしませんか？

Vue（^ 2.0.0-rc.6） + Browserifyを使用すると、エントリポイントは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>

空白の白い画面、何かを見逃しましたか？

編集：

エントリhtmlは<div id="root"></div>だけで、コンソールログにエラーはありません。また、console.log('test')そのファイルがコンソールに表示されるので、Hello.vueがロードされていると確信しています。

編集2：

エラーが見つかりました：

[Vue警告]：Vueのランタイム専用ビルドを使用していますが、テンプレートオプションは使用できません。テンプレートをレンダリング関数にプリコンパイルするか、コンパイラに含まれるビルドを使用します。 （匿名コンポーネントにあります-デバッグメッセージを改善するには、「名前」オプションを使用します。）

これは、webpackソリューションを使用する必要があるということですか？標準のHTMLは使用できませんか？

SOLUTION： 'vue/dist/vue.js'からVueをインポート

javascriptvue.jsvuejs2browserifybabel
50
user2002495

答えを探している人々の生活を楽にするためだけに：

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

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

著者から-2.0スタンドアロンビルド（コンパイラ+ランタイム）。 NPMパッケージのデフォルトのエクスポートはランタイムのみです。これは、NPMからインストールする場合、ビルドツールでテンプレートをプリコンパイルする可能性が高いためです。

62
dima

BrowserifyやWebpackなどのビルドツールを使用している場合、おそらく 単一ファイルコンポーネント を使用してこのようなエラーを回避できます（単一ファイルコンポーネントでは、テンプレートはvueifyによって関数をレンダリングするために自動的にコンパイルされます）。他の場所ではテンプレートを避けるようにしてください。回避方法については、フォーラムとドキュメントをご覧ください。

しかし、私は自分の経験から、プロジェクト内のテンプレートを見つけるのは必ずしも簡単ではなく、それがエラーメッセージの原因であることを知っています。一時的な回避策として同じ問題が発生している場合は、次の方法が役立ちます。

「vue/dist/vue.js」をインポートしないでください（ドキュメントを確認してください： https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs- runtime-builds 理由はありません）

代わりに、使用しているビルドツールでそれを処理する必要があります。

私の場合、エイリアスの作成にaliasifyを使用できるbrowserifyを使用しています。 package.jsonファイルに次を追加します。

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

webpackユーザーの場合、以下を構成に追加する必要があるようです。

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

詳細については、ドキュメントをご覧ください： https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

33
gwildu

Vue 3.4.0の場合、プロジェクトのルートディレクトリに新しいファイルを追加できます。

vue.config.jsを追加し、以下を追加します。

module.exports = {
  runtimeCompiler: true
}

次回アプリを起動すると、あなたは見ることができます

204msで正常にコンパイルされました
20:46:46

App running at:
6
Krishnadas PC

WithBrunchbrunch-config.jsにこのルールを追加することでこれを解決しました。

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

http://brunch.io/docs/config#npm を参照してください

内部<template>を使用してVueコンポーネントを構築しました。

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

<script>

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