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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5925閲覧

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

ganariya

総合スコア50

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/08/26 01:11

やっていること

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


うまくいかないこと

index.htmlに用意した

html

1<body> 2 <div id="app"> 3 <router-view></router-view> 4 </div> 5 <script src="./../scripts/mypage.bundle.js"></script> 6</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

javascript

1import Vue from 'vue'; 2import VueRouter from 'vue-router'; 3import './../../node_modules/bulma/css/bulma.css'; 4import Buefy from 'buefy'; 5import 'buefy/lib/buefy.css'; 6import routes from './routes.js'; 7 8Vue.use(VueRouter); 9Vue.use(Buefy); 10 11const router = new VueRouter({ 12 routes: routes 13}) 14 15let app = new Vue({ 16 router 17}).$mount('#app');

routes.js

javascript

1import HomePage from './../components/HomePage.vue'; 2import AtCoderPage from './../components/AtCoderPage.vue'; 3import CodeforcesPage from './../components/CodeforcesPage.vue'; 4import CSAPage from './../components/CSAPage.vue'; 5import AOJPage from './../components/AOJPage.vue'; 6 7export default [ 8 { 9 path: '/', 10 component: HomePage 11 }, 12 { 13 path: '/AtCoder', 14 component: AtCoderPage 15 }, 16 { 17 path: '/Codeforces', 18 component: CodeforcesPage 19 }, 20 { 21 path: '/CSA', 22 component: CSAPage 23 }, 24 { 25 path: '/AOJ', 26 component: AOJPage 27 }, 28]; 29

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

mypage.js

1import Vue from 'vue'; 2import Router from 'vue-router'; 3import './../../node_modules/bulma/css/bulma.css'; 4import Buefy from 'buefy'; 5import 'buefy/lib/buefy.css'; 6 7import App from './../components/app.vue'; 8 9Vue.use(Buefy); 10 11let app = new Vue(App).$mount('#app'); 12

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

インストール — Vue.js

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

html

1<body> 2 <div id="app"></div>

javascript

1let app = new Vue({ 2 router, 3 render(h) { 4 return h('router-view'); 5 }, 6}).$mount('#app'); 7

投稿2018/08/26 19:37

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ganariya

2018/08/27 00:14

ありがとうございます。 上記のjaavscriptの構成にすると上手くいく事ができました。 しかし、どうしてうまくいくのかがよくわかりません。 教えていただいた上記の[インストール — Vue.js](https://jp.vuejs.org/v2/guide/installation.html#%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)を見て、完全コンパイラと、実行時コンパイラがあることがわかりました。 現在、自分の環境では、完全コンパイラをして、bundleされたjsの中に - コンパイラされたVueコンポーネント - 実行するだけのVue.js(runtime.vue) が入っているはずなのにどうして動かないのでしょうか・・・ package.json ``` { "name": "atcoder_save", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --mode=development", "start": "webpack --watch --mode=development" }, "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "buefy": "^0.6.6", "bulma": "^0.7.1", "copy-webpack-plugin": "^4.5.2", "css-loader": "^1.0.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "moment": "^2.22.2", "node-sass": "^4.9.2", "postcss-loader": "^2.1.6", "sass-loader": "^7.0.3", "scss-loader": "0.0.1", "style-loader": "^0.21.0", "vue": "^2.5.16", "vue-loader": "^15.2.6", "vue-router": "^3.0.1", "vue-template-compiler": "^2.5.16", "vuex": "^3.0.1", "webpack": "^4.16.3", "webpack-cli": "^3.1.0" } } ```
yhg

2018/08/27 03:32

Webpack の設定で resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } のように設定していない場合は完全版ではなく、ランタイム版がバンドルされます。
ganariya

2018/08/27 07:55

vue/dist/vue.esm.jsにしても、うまく治りませんでした・・・ 僕の認識だと ①コンポーネントをWebpackでコンパイルする ②コンポーネントは全て、レンダー関数をもつ(表示するだけの状態になる) ③すでにレンダー関数を持っているため、import Vue from 'vue'(通常のランタイム版)をインポートするだけでよい。 と考えています。 マウントされないのは、vue-loaderとcompilerによって、コンパイルされていないのか、もしくは、完全版でないと表示できないのでしょうか。 ただ、完全版にしても、うまく表示できなかったのでGoogleExtensionの仕様が関係してくる気もしてきました・・・ web系は頭がこんがらがります。
yhg

2018/08/27 11:04

その認識で合ってると思います。 1つ原因として思いついたのは、el・render・template オプションのいずれも指定されていない点かなと思います。 公式ドキュメントに詳しく書かれていませんのであくまで予想ですが、 ① new Vue() した時点でテンプレートをコンパイル ② コンパイルされたルートコンポーネントのインスタンスを生成 ③ ルートコンポーネントをマウント のような流れで処理されるため $mount() で DOM を指定してもその時にはすでに②まで完了しているためコンパイル処理が入らず、render 関数を持たないルートコンポーネントがマウントされるだけになるのではないでしょうか。そのため $mount() を使いたい場合は template か render オプションが必須になってくるのではないかと思います。 結局のところ el オプションを指定して、$mount() でのマウントをやめるのが手っ取り早そうですね。
ganariya

2018/09/01 02:00 編集

const app = new Vue({ el: '#app', router, }); としてみましたが、これでもコンパイルされませんでした。 どこかしらでミスを行っていると思うので、renderで対応しようと思います。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問