VueでTodoリストを作ろう #2 停滞

VueでTodoリストを作る過程を記した備忘録第二弾。
前回はHTML、JavaScriptのファイルを用意したところで終わっていました。今回は両ファイルを連携させるところからです。

その前に

前回の作業を続ける前に一点確認したいことがあるので、そちらを進めます。
Vueと同じくWeb開発フレームワークであるReactにはcreate-react-appという初期ファイル・設定の生成を行うコマンドがあるらしい。
Vueにもそういうコマンドがあった場合、前回の行動が8割方無になるのですが確実にそちらの方が楽なので調べてみます。

Vue-CLIという生成ツールがあるらしいですが、公式ドキュメントで「初心者はVue-CLIを使うな」と記載があったので今回は使用せず進めたいと思います。勉強にならないし。

HTML-JavaScriptの連携

ブラウザで見れば動くかという僅かな望みをかけてみましたが、ダメなようです。

よく見たらVueのインポートが抜けていたので追加しました。
そういえばVueのインストールもしていないような.…？
拡張機能だけ入れたら動くわけでもないと思うので、npmを使ってインストールしましょう。

npmもないのでそれも使えるようにするところから始めます。

npm,Vueをインストール

node.jsとかnpmのインストールが一切できておらず、すでにやる気がなくなってきました。環境構築が一番面倒だし退屈な作業なの、いい加減どうにかした方がいい。
node.jsの公式サイトからインストーラを持ってきてインストールするだけでした。PATHの設定はいったん置き。
こうやって後回しにするから困ることになるが.…

何はともあれnpmが動作するようになったので、Vueとか諸々を入れていきましょう。

と、その前にpackage.jsonを作成しました。よくわからないので適当に。
何かをインストールすると適宜ここに追加されていくはずです。

ひとまずVueをインストール。

エラーと闘う

ウヌ.…
動かな過ぎてガッシュ・ベルが出てしまいました。
外部ファイルにしているのが悪いのかと思い統合してみたりしてみましたが、動かない。

コンソールを見てみると、クロスオリジンがなんたら.…とエラーが出ている。

クロスオリジン？

耳に挟んだことはあるが何のことかは全然わからない概念世界37位が出てきたな。
これについて調べるのも必要だが、そもそもローカルファイルをそのままブラウザで開いていること自体が大間違いな気がします。
調べたらhttp-serverというコマンドで簡易サーバーを立てられるらしいので、インストールして実行。

実行権限の問題はあったが、何とか画面を表示することができました。
なんかエラーが出ていますね。チラ見ですがさっきのクロスオリジンとは別のエラーに見える。

どうやらパスの形式で怒られているように見えるので少し書き換えてみましたが、何も変わらず。ウヌゥ.…

まだまだ問題が山積みで何も進んでいませんが、今日は時間なのでここまでにしたいと思います。

終わりに

Vue-CLIを使っているかHTMLとjsをひとまとめで書いている人しかいない！！！！！！！！！！！！！！！！！Vue-CLIを使わないでくれ！！！！！！！！！！！！！！！！！！！！

調べ物が主だったので文も短く、思うように進捗を出すことができませんでした。
次回こそはちゃんとファイル間連携を済ませて内部実装に移りたいですね。
先は長い。今月中に完成したいが、もうあと二回か三回しか更新できるタイミングがない(業務として書いているから)。プライベートの時間を削ればできますが..…