初めに
最近のwebの技術が知りたくて、この間のkindleセールで50%offでVue.js3超入門買いました。ちなみにjavascriptもほとんど触った事なく、それも同じ時のセールで「プロフェッショナルWebプログラミング JavaScript」を読んだだけの知識。Chapter3まで読んだので少しこれまでのところを振り返りまとめてみる。
Vue3とは
フロントエンド開発に使うJavaScriptのフレームワークの一つ。 ちなみにVue2までとVue3は別物らしい。 なので本のタイトルにもVue3と入っているし、この書籍ではいたるところでVueと言わずにVue3という表現を使うようにしているのを感じる。
Vue3セットアップ-インストールの沼にハマる
もちろん本に書いてあるのに従ってVue3のインストール・設定をやっていくわけですよ。それでもやっぱり一発でインストール完了といかないわけですよ。
Vue.js devtoolsのインストール
Vue devtools Beta 【chrome ウェブストア】Vue.js devtoolsのインストールは別に躓くことなし。Google chromeのweb storeからインストールするだけ。 Vue3対応の方ということでBetaと書いてある方をインストール。
【Vue.js devtools 6.0.0 beta 20】 素人がBeta版とか触って大丈夫なのか？という不安があったが、Vue3対応はbetaって書いてあるからさ。
どうでもいいけど躓くことと躓くとこどっちの日本語が正しいのか惑わされたぞ。この場合どっちでもいいっぽいが
Node.jsのインストール
Node.js 日本語公式ページ公式サイトにアクセス。とりあえず最新版だろでDownloadしてから本をちゃんと読むと
- 「Node.js偶数バージョンは長期サポートする安定版」
- 「Node.js奇数バージョンは短期サポートの試験的なもの」
と書いてあり、慌てて偶数版を再Download。最新版 or LTSって言われたら最新版選んじゃうよね。LTS(long time support)とは見てもわからないし。インストーラーがあるからこれのインストールもまあ問題なし。インストール後node –versionのコマンドを打ってバージョンが出たのでインストール出来ていること確認
C:\Users\mail>node --version
v16.13.0
node.jsを入れた時にいっぱい他のもインストールされて大丈夫なのか？とちょっと不安になる。
これってPythonもインストールされたってこのなのかね
Vue CLIのインストール
ここからが大変でした。 結論から言えばWARNが出ててもインストール出来ていたって事だと思うけど、CUIだしインストール出来ているか出来ていないかよくわからんのよ。 何回かやってしまった。
npm install -g @vue/cli
インストールコマンドを実行すると
WARNだらけで本のような画面にならない。ググってみると2.0以前のものをアンインストールしないとインストールできないらしい。 2.0以前のものなんてインストールされていないと思うが、とりあえず書いてあるとおり
npm uninstall -g vue-cli
npm install -g @vue/cliのコマンドを実行。
結局WARNだらけで同じような画面で解決なし。こりゃダメだなって感じで色々調べてもよくわからないし…。って思いながらvue –versionのコマンドを何気なく入れると・・・
vue --version
なんとインストール出来ているではないか。なんでインストール出来ているのかは全然わからないが、そのまま先へ進める。
サーバーを起動するためのコマンド
vue serveを実行するとまた色々英語が出てきて進まない。
Command vue serve requires a global addon to be installed.
Please run npm i -g @vue/cli-service-global and try again.vue serveを実行するにはグローバルなアドオンがインストールされている必要があるってコト！？
勘弁してくれと思いながら、まあ書いてあるとおり
npm i -g @vue/cli-service-globalのコマンドを実行。
それがよかったのか悪かったのかももはや分からない状態だが、vue serveのコマンドが通ってトップページ表示まで出来た。
さらに先に進めるが、躓きはこれだけでは終わらず。
プロジェクト作成のコマンド
vue create hello_appを入力すると途中で止まるという悲劇
多分これは本当にただのフリーズか何かで2回目やったら問題なく通りました。
最後に
一応ここまででNode.jsインストールしてVue CLIインストールして、さらにGUIツールの動作も確認して、Vue Viteでのプロジェクト作成、ビルドの流れまで体験したが、半分以上は「何だかわからないけど動いているからヨシ」状態。この先大丈夫なのか？
コメント