質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

Vue.jsの内容がマウントされず、画面表示されない!

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 12K+

ganariya2525

score 48

 やっていること

Webpack + Chrome-Extensionsで現在、アプリを開発しています。


 うまくいかないこと

index.htmlに用意した

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="./../scripts/mypage.bundle.js"></script>
</body>

上記のdiv(#app)にmain.jsでマウントをしても、マウントされず、
ブラウザ上で

<body>
    <!--function (a, b, c, d) {
    return createElement(vm, a, b, c, d, true);
  }-->
    <script src="./../scripts/mypage.bundle.js"></script>

</body>


とのみ表示されてしまいます。


 ファイル

 mypage.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import './../../node_modules/bulma/css/bulma.css';
import Buefy from 'buefy';
import 'buefy/lib/buefy.css';
import routes from './routes.js';

Vue.use(VueRouter);
Vue.use(Buefy);

const router = new VueRouter({
    routes: routes
})

let app = new Vue({
    router
}).$mount('#app');

 routes.js

import HomePage from './../components/HomePage.vue';
import AtCoderPage from './../components/AtCoderPage.vue';
import CodeforcesPage from './../components/CodeforcesPage.vue';
import CSAPage from './../components/CSAPage.vue';
import AOJPage from './../components/AOJPage.vue';

export default [
    {
        path: '/',
        component: HomePage
    },
    {
        path: '/AtCoder',
        component: AtCoderPage
    },
    {
        path: '/Codeforces',
        component: CodeforcesPage
    },
    {
        path: '/CSA',
        component: CSAPage
    },
    {
        path: '/AOJ',
        component: AOJPage
    },
];

 HomePage.vue

<template>
    <div>
        <div>
            <p>
                ホームページ
            </p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        }
    }
</script>

<style scoped>

</style>

 うまくいっていた時

Vue-Routerを取り入れる前のApp.vueのみを使用している時は以下のようにすることでマウントする事ができ、画面表示できていました。

 mypage.js

import Vue from 'vue';
import Router from 'vue-router';
import './../../node_modules/bulma/css/bulma.css';
import Buefy from 'buefy';
import 'buefy/lib/buefy.css';

import App from './../components/app.vue';

Vue.use(Buefy);

let app = new Vue(App).$mount('#app');

 app.vue

<template>
    <div>
        <MyHeader></MyHeader>
        <button @click="onclick" class="button is-primary">
            click
        </button>
        <Hello></Hello>
    </div>
</template>

<script>

    import Hello from './Hello.vue';
    import MyHeader from './MyHeader.vue';

    export default {
        data: function () {
            return {
                text: ""
            }
        },
        methods: {
            onclick: function () {
                console.log("おしたおl!!");
            }
        },
        components: {
            MyHeader,
            Hello
        }
    }
</script>

<style scoped>

</style>
 No newline at end of file

インターネットで調べても、マウントできていない記事を見つけることができませんでした。
どうかよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

テンプレートコンパイラが含まれていないバージョンの Vue を読み込んでるのかなと思います。
HTML ファイルに直に Vue テンプレートを書きたい場合はテンプレートコンパイラが含まれてるバージョンの Vue を読み込ませる必要があります。ただ、容量が三割増しになるので出来る限り避けたほうが良いです。

インストール — Vue.js

コンパイラを含まないバージョンでは、下記のような感じに変更すると動くかなと思います。

<body>
  <div id="app"></div>
let app = new Vue({
  router,
  render(h) {
    return h('router-view');
  },
}).$mount('#app');

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/27 16:55

    vue/dist/vue.esm.jsにしても、うまく治りませんでした・・・

    僕の認識だと
    ①コンポーネントをWebpackでコンパイルする
    ②コンポーネントは全て、レンダー関数をもつ(表示するだけの状態になる)
    ③すでにレンダー関数を持っているため、import Vue from 'vue'(通常のランタイム版)をインポートするだけでよい。
    と考えています。

    マウントされないのは、vue-loaderとcompilerによって、コンパイルされていないのか、もしくは、完全版でないと表示できないのでしょうか。
    ただ、完全版にしても、うまく表示できなかったのでGoogleExtensionの仕様が関係してくる気もしてきました・・・
    web系は頭がこんがらがります。

    キャンセル

  • 2018/08/27 20:04

    その認識で合ってると思います。

    1つ原因として思いついたのは、el・render・template オプションのいずれも指定されていない点かなと思います。

    公式ドキュメントに詳しく書かれていませんのであくまで予想ですが、

    ① new Vue() した時点でテンプレートをコンパイル
    ② コンパイルされたルートコンポーネントのインスタンスを生成
    ③ ルートコンポーネントをマウント

    のような流れで処理されるため $mount() で DOM を指定してもその時にはすでに②まで完了しているためコンパイル処理が入らず、render 関数を持たないルートコンポーネントがマウントされるだけになるのではないでしょうか。そのため $mount() を使いたい場合は template か render オプションが必須になってくるのではないかと思います。

    結局のところ el オプションを指定して、$mount() でのマウントをやめるのが手っ取り早そうですね。

    キャンセル

  • 2018/09/01 10:59 編集

    const app = new Vue({
    el: '#app',
    router,
    });

    としてみましたが、これでもコンパイルされませんでした。
    どこかしらでミスを行っていると思うので、renderで対応しようと思います。。。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る