【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 -
そろそろPWAへの理解を深めないとダメだなと思ったので、Vue.jsでPWAを作成します。
勉強しながらなので、間違っている箇所もあるかと思いますがご了承ください。
作成するものは、ハイブリッドアプリとしての作成を考えていたもの。
ハイブリッドアプリはいくつか作成してきたし、PWAとして作成しようと考えました。
vue-pwa-boilerplateを使う
まずはテンプレートを使ってプロジェクトを作成します。
vue-pwa-boilerplateを使うためには「vue-cli」が必要なので、インストールしていない場合はインストールしましょう。
(※npmは入っているものとします。)
vue-cliのインストール
$ npm install -g vue-cli@latest
テンプレートを使ってプロジェクトを作成
$ vue init pwa {プロジェクト名称}
私は「fufuu-app」という名前で作成したので
$ vue init pwa fufuu-app
としました。コマンドを叩くと、テンプレートの設定について色々と聞かれます。
■プロジェクトの名前
Project name
プロジェクトの名前を入力しましょう。
■省略名称
Project short name: fewer than 12 characters to not be truncated on homescreen
s (default: same as name)
プロジェクト名の省略名称を入力しましょう。
デフォルトはプロジェクト名称と同じです。
■プロジェクトの説明
Project description
プロジェクトの説明文を入力しましょう。
特にこだわりがなければデフォルトのままで大丈夫です。
■作者名
Author
作者名を入力しましょう。
適当で問題ありません。
■Vue-Routerのインストール
Install vue-router?
Vue-Routerを使うかかどうかです。使う場合は「y」と入力しましょう。
入れるか入れないか迷っている方は入れましょう。
私も入れて実装しています。
■ESlintを使うかどうか
javascriptコードの検証ツールです。
コード実行前に明らかなバグを見つけてくれたりします。
私は入れませんでした。
入れる方は「y」と入力。
Use ESLint to lint your code?
■unitテストのためのツールを導入するかどうか
unitテストのためのKarmaとMochaを導入するかどうかです。
私は入れませんでした。
Setup unit tests with Karma + Mocha?
■e2eテストのためのツールを導入するかどうか
e2eテストとは「End to End」の略で、ブラウザから操作された際のテストのこと。
ここではNightwatchを入れるかどうか聞かれています。
私は入れませんでした。
Setup e2e tests with Nightwatch?
ここまででアプリケーションの設定が完了しました。
あとは最後の仕上げです。
作成したプロジェクトディレクトリに移動する
$ cd '作成したプロジェクト名'
私の場合は
$ cd fufuu-app
npm install
プロジェクトディレクトリに移動したら「npm install」を実施しましょう。
$ npm install
起動
npm installが終わったら、起動してみましょう。
起動時には以下のコマンドを。
$ npm run dev
これでブラウザが立ち上がります。
最初はこんな画面です。
あとは、これを改造していくだけですね！
本日はここまで。
次回は共通メニューとかを作っていきます。
