イイダリョウのブログ。CLIのプロトタイプとプロジェクトを作るJSVue.jsの続きです。CLIをインストールしてみました。今回はプロトタイプとプロジェクトを作ってみます。Nuxt.js超入門」を参考に進めてみる。※参考:https://www.amazon.co.jp/Vue-js-Nuxt-js超入門-掌田津耶乃/dp/4798056596.vueファイルを作るまずは簡易アプリを作成する。</div></template>htmlは通常doctypeやhtmlタグ、headタグ、bodyタグが必須だが書かない。全体をtemplateタグで囲う。この状態を「プロトタイプ」というらしい。templateタグはページレンダリング時には読み込まれず、JSで実行するときに初めて読み込まれる。HTMLのタグリファレンスこれを「app.vue」という名前でデスクトップに保存。拡張子は「.html」ではなく「.vue」!これをブラウザで開いてみる。この時点ではプレーンテキスト(.txt)ファイルと変わらない表示。.htmlファイルじゃないから当然。先ほど作ったファイルをフォルダに入れる。デスクトップに「vue_app」というフォルダを作り、そこにファイルを移動。次にターミナル(黒い画面)を開く。クモのようにコツコツとフォルダに移動する。serveおお、処理中みたいな表示になって成功!下記のURLにアクセスしてみるとhttp://localhost:8080/やた!ページが表示された!フォルダを見ると「node_modules」というフォルダが作られていた。ブラウザでソースを見るとページに表示されているテキストはない。app.jsを実行している。デベロッパーツールで見るとapp.jsの実行によってDOMが作られているようだ。動作確認できたので、アプリを終了する。Ctrlキーを押したままCを押す。このようにvueファイルから簡易的なアプリが作れる。CLIのプロジェクトを作る。プロジェクト名」を作成。プロジェクト名「hajimete_project」にする場合。hajimete_projectプリセットの指定こんな画面になる。プリセットを選んでとい意味のようだ。CLIをアップデートしてって言ってきてるなー。」でBabelとESLintか。普段はこれでいいらしい。