Vue.jsの続きです。前回はVue CLIをインストールしてみました。今回はプロトタイプとプロジェクトを作ってみます。それではどうぞ!
【目次】
前回の記事はこちら
※参考:【Vue.js】Vue CLIをインストールしてみる(CDN、Nuxe.jsとの違い) - クモのようにコツコツと
プロトタイプを作る
Vue CLIの導入については、これまでと同様、購入した書籍「Vue js & Nuxt.js超入門」を参考に進めてみる。
※参考:https://www.amazon.co.jp/Vue-js-Nuxt-js超入門-掌田津耶乃/dp/4798056596
.vueファイルを作る
まずは簡易アプリを作成する。こんなコード。
<template> <div class="app"> <h1>Vueアプリの作成テスト</h1> <p>成功すればページが表示される</p> </div> </template>
htmlは通常doctypeやhtmlタグ、headタグ、bodyタグが必須だが書かない。全体をtemplateタグで囲う。この状態を「プロトタイプ」というらしい。原型といった意味か。
なお、templateタグはページレンダリング時には読み込まれず、JSで実行するときに初めて読み込まれる。
※参考:<template要素> - テンプレート | HTMLのタグリファレンス
これを「app.vue」という名前でデスクトップに保存。拡張子は「.html」ではなく「.vue」!
これをブラウザで開いてみる。まだこの時点ではプレーンテキスト(.txt)ファイルと変わらない表示。まあ.htmlファイルじゃないから当然。
Vueアプリのフォルダにコマンドで移動
先ほど作ったファイルをフォルダに入れる。デスクトップに「vue_app」というフォルダを作り、そこにファイルを移動。
次にターミナル(黒い画面)を開く。
ターミナルに不慣れな方はこちら
※参考:黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成 - クモのようにコツコツと
※参考:黒い画面だけでWebページを作成-後編:viエディタでコーディング! - クモのようにコツコツと
フォルダに移動する。cdコマンドでデスクトップに移動して…
$ cd DeskTop
さらに「vue_app」フォルダに移動
$ cd vue_app
プロトタイプを実行
プロトタイプを実行するvueコマンド
vue serve
おお、処理中みたいな表示になって成功!
下記のURLにアクセスしてみると
http://localhost:8080/
やた!ページが表示された!
フォルダを見ると「node_modules」というフォルダが作られていた。
ブラウザでソースを見るとページに表示されているテキストはない。app.jsを実行している。
デベロッパーツールで見るとapp.jsの実行によってDOMが作られているようだ。
動作確認できたので、アプリを終了する。Ctrlキーを押したままCを押す。
このようにvueファイルから簡易的なアプリが作れる。
プロジェクトを作る
次にVue CLIのプロジェクトを作る。
プロジェクト作成
ターミナルで「vue create プロジェクト名」を作成。例えばプロジェクト名「hajimete_project」にする場合。
vue create hajimete_project
プリセットの指定
こんな画面になる。プリセットを選んでとい意味のようだ。
Vue CLIをアップデートしてって言ってきてるなー。まあ今はいいか。
デフォルトは「default (babel, eslint) 」でBabelとESLintか。普段はこれでいいらしい。
今回は書籍に従って「Manually select features 」にしてみたい。矢印キーで下に移動。
組み込み項目の選択
すると次にこんな画面が開く。
- Babel
- TypeScript
- Progressive Web App (PWA) Support
- Router
- Vuex
- CSS Pre-processors
- Linter / Formatter
- Unit Testing
- E2E Testing
TypeScriptとかPWAとかVuexとかいろいろ組み込めるのね。
今回はデフォルトで選ばれているBabelとESLintのみでOK。次に進む。
linter / formatterの選択
同じような選択画面が続く。
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
ESLintとはJSの構文チェックをしてくれるツール。
※参考:JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう – WPJ
デフォルトではESLintを使い、何かあればエラーになる、という設定。このままで次に進む。
Lintの追加機能
次に出たのがこんな画面。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save ◯ Lint and fix on commit
翻訳すると「追加のリント機能を選択します」デフォルトではLint on save。このまま次へ。
設定情報の記述場所
次の画面。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json
翻訳すると「Babel、PostCSS、ESLintなどの設定を配置するのが好きな場所はどこですか?」 特に場所は変えなくていいので、このまま次へ。
プリセットの保存
お、次の画面、これが最後っぽい!
? Save this as a preset for future projects? (y/N)
翻訳すると「 これを将来のプロジェクトのプリセットとして保存しますか? 」ああするとも!Y(イエス)!*1
Yを押すとしばらく、いろいろ処理をしている画面が続く…
🎉 Successfully created project hajimete_project. 👉 Get started with the following commands:
成功した!
プロジェクト実行
処理が終わったら、下記のコマンドでプロジェクを実行する
$ npm rum serve
おや、エラーになった
path /Users/(ユーザ名)/package.json npm ERR! code ENOENT npm ERR! errno -2 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open '/Users/(ユーザ名)/package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! /Users/(ユーザ名)/.npm/_logs/2019-10-14T21_56_08_744Z-debug.log
翻訳するとpackage.jsonが見つからないと言っているようだ。
最初にプロジェクトのフォルダに移動する必要がある?
※参考:VueCLI3導入とできることまとめ - Qiita
hajimete_projectに移動して…
$ cd hajimete_project
リベンジ!
$ npm rum serve
おお、処理が始まった!しばらくまつ。
やた!できたっぽい!
再度、下記のURLにアクセス
http://localhost:8080/
おお、Vueプロジェクトの初期画面が!!
最後に
ひとまずVueプロジェクトの初期画面にたどり着けました!次回はプロジェクトとはなんぞや、の部分に入っていきたく。それではまた!
※参考:Vue.jsの習得のためにやったことまとめ
qiita.com
*1:この、YとNで選ぶのは昔やってたMSXのゲームを思い出す