The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 -

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 -f:id:duo-taro100:20160218004611p:plain

そろそろ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

これでブラウザが立ち上がります。
最初はこんな画面です。

f:id:duo-taro100:20171025221830p:plain

あとは、これを改造していくだけですね!
本日はここまで。
次回は共通メニューとかを作っていきます。