jsのdataの中身がHTMLで表示されない

ドットインストールvue.jsのチュートリアルで積んでいます
https://dotinstall.com/lessons/basic_vuejs_v2/43903
↑作成したindex.htmlをブラウザで確認するとmain.jsで定義したnameではなく<p>タグの中身そのままで {{ name }}としか表示されません。
（本来であればそのままnameの値が表示されるはずなのですが）
ミスっているところあれば教えてください
以下コードと出力結果です

JavaScript
1(function () {
2  'use strict';
3
4  var vm = new Vue({
5
6    el: '#app',
7    data: {
8      name: "hoge"
9    }
10  });
11})();
12

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>My Vue App</title>
7  <link rel="stylesheet" href="css/styles.css">
8</head>
9
10<body>
11  <div id="app">
12    <p>{{name}}</p>
13  </div>
14  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
15  <script src="js/main.js"></script>
16</body>
17
18</html>

＜追記＞
以下、ファイルの階層です
MyVueApp---
｜
｜---css---styles.css
｜---js---main.js
｜---index.html

VSCodeでmain.jsを実行したら以下のようなログが出ました

log
1C:\Program Files\nodejs\node.exe --inspect-brk=19324 js\js\main.js 
2Debugger listening on ws://127.0.0.1:19324/982f63eb-7adf-45e2-a6eb-6a6a447d3e5b
3For help, see: https://nodejs.org/en/docs/inspector
4Debugger attached.
5Waiting for the debugger to disconnect...
6ReferenceError: Vue is not defined
7    at e:\git\MyVueApp\js\js\main.js:4:12
8    at Object.<anonymous> (e:\git\MyVueApp\js\js\main.js:11:3)
9    at Module._compile (internal/modules/cjs/loader.js:952:14)
10    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
11    at Module.load (internal/modules/cjs/loader.js:811:32)
12    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
13    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
14    at internal/main/run_main_module.js:17:11

kei344

2020/03/05 02:20

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

imu2452

2020/03/05 04:22

ご指摘ありがとうございます。忘れていました。。

行動規範の内容に同意します

回答3件

私の環境でも当該のコードで素直に動いてくれています。

そこで、以下の2つの可能性を提案します

1.. もしかして、インターネットに接続されていない環境で動作させられておりませんでしょうか。

Vue.jsのライブラリをインターネット経由で引っ張ってきている状態ですので、インターネットに接続されていない状態ですと、質問者様が仰られている状態を再現することができております。
(さすがにそんなことはないと思いますが。。。)

2.. htmlファイルが存在するディレクトリにjsディレクトリが存在しており、その中にmain.jsが含まれていることは確認できますでしょうか。

このパスが誤っていると、質問者様のHTMLコード内にある <script src="js/main.js"></script> の指定するパスにmain.jsファイルが存在しないことになりますので、当該の現象は再現します。

よろしければご確認くださいませ。

<追記>
質問への追記を拝見しました。
特に回答へのレスポンスもない事から、おそらくインターネットに接続も問題ないのだと推測します。

申し訳ありません、私にはこれ以上、問題の発生の原因及び可能性について思い浮かびませんでした。

よろしければ、ブラウザには大抵、開発者ツール(デベロッパツール)が付属しております。
例えば、Google Chromeですと、Windowsで使用されている場合はF12、macOSで使用されている場合はCmd + Shift(Ctrlだったかも) + I で表示させることが可能です

その下の辺りに、エラーが表示されていることがありますので、そちらをご確認いただいた方が解決できるかもしれません。

念のため、こういうものですよ、という画像を添付しておきます。
(なお、画像の例はディレクトリ構成を間違えている場合のエラーが表示されているものになります)

よろしければご確認くださいませ。。

投稿2020/03/04 02:13

編集2020/03/04 02:59

cocoalix

総合スコア62

kyoya0819

2020/03/04 02:50

質問編集時に通知が行かないので念のため。 2の可能性は質問者さんが出したディレクトリ構成よりなさそうです。

cocoalix

2020/03/04 02:53

asuchi0819様ありがとうございます、非常に助かります！仰られる通り、ディレクトリ構成の問題はなさそうですね。。。

imu2452

2020/03/04 03:14

回答ありがとうございます。ご提案していただいた内容をためしてみました。 1．もしかして、インターネットに接続されていない環境で動作させられておりませんでしょうか。 > インターネットは通常通り動作していました 2. htmlファイルが存在するディレクトリにjsディレクトリが存在しており、その中にmain.jsが含まれていることは確認できますでしょうか。 > jsフォルダのディレクトリがhtmlファイルと同じ階層にあることと、jsフォルダ内にmain.jsファイルがあることを確認しました。詳細は質問へ追記しましたのでご確認いただけると幸いです。

cocoalix

2020/03/04 03:21

質問者様ご返信ありがとうございます。はい、質問への追記まで確認させていただきました。回答にも追記させていただきましたが、こういう時は開発者ツールで実際にエラーが出ていないかどうかを確認する方が良いと考えています。よろしければ、ブラウザの開発者ツールに表示されているエラーの内容も貼っていただけると助かります。 (回答本体にはっつけた画像ですと、下に赤字で「Failed to load...」と書いてあるものが発生しているエラーになります。お手数をお掛け致しますが、ご確認をお願い致します。。。

imu2452

2020/03/04 13:48

丁寧なご回答ありがとうございます。無事に解決しました！ディレクトリの構成が間違っていました。ありがとうございました。

cocoalix

2020/03/05 00:57

質問者様はい、解決してとてもよかったです。ディレクトリ構成は私も時々つまづきますので、よく注意した方が良いかもしれません。。おそらくYousuck様の回答からその結論を導かれましたねでしたら、最終決定は質問者様にお任せしますが、そちらをベストアンサーに指定してください (ベストアンサーを決めないと、この質問はクローズ？になりませんので。。。今後も学習、頑張ってください！

imu2452

2020/03/05 04:24

ご指摘ありがとうございます。解決済にするのを忘れていました。。今回のディレクトリ構成のミスでひとつ知見を得ました。ありがとうございました！

行動規範の内容に同意します