maji-thatcher 開発記録 2019-02-23 (1日目)

H.KAMIYAMA
@alclimb

Nuxt.js 関係

Nuxt.jsのセットアップ

公式ページ に従いcreate-nuxt-appを使ってNuxt.jsベースのプロジェクトをセットアップする。

bash
# nuxt.jsのセットアップ $ npx create-nuxt-app my-app1 # セットアップ中に対話式で指定する npx: installed 379 in 20.033s > Generating Nuxt.js project in C:\Users\kamiyama\Desktop\my-app1 ? Project name > my-app1 ? Project description > My best Nuxt.js project ? Use a custom server framework > none ? Choose features to install > Progressive Web App (PWA) Support, Linter / Formatter, Prettier, Axios ? Use a custom UI framework > none ? Use a custom test framework > jest ? Choose rendering mode > Single Page App ? Author name > H.KAMIYAMA ? Choose a package manager > npm

今回のプロジェクトに SSR は必要ないので SPA としてセットアップ。

デバッグ実行

bash
# カレントディレクトリを変更 $ cd my-app1 # デバッグ実行 $ npm run dev

ビルド中に以下のエラーが表示されたが動作している。後々調べる必要あり。

bash
ERROR (node:7028) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

localhost:3000にアクセスすることで動作していることを確認。

image.png image.png

ビルド

bash
# プロジェクトのビルド $ npm run build

これでdistフォルダに公開用のファイル一式がビルドされる。

コンポーネントの作成テスト

Nuxt.jsでのコンポーネント作成方法をテストしておきましょう。

index.vue
<template> <section class="container"> <div> ・・・ <my-spinner/> </div> </section> </template> <script> import MySpinner from '~/components/MySpinner.vue' export default { components: { MySpinner } } </script>

Nuxt.jsでコンポーネント作成のテストとしてcomponents/MySpinner.vueを追加。
あとはこのコンポーネントを利用する側でimportして利用してあげればOK。

Honeycam 2019-02-24 00-00-28.gif Honeycam 2019-02-24 00-00-28.gif

Spinnerコンポーネントが正常に動作しています。

Firebase関係

公式ページ に従いfirebaseをグローバルにインストールして、上記Nuxt.jsの項目でビルドしたdistフォルダ内のファイルを試しにデプロイしてみる。

bash
# firebaseをグローバルにインストール $ npm install -g firebase-tools # firebaseにログイン $ firebase login # firebaseプロジェクトをセットアップ $ firebase init

公開するフォルダをdistに変更。

firebase.json
{ "hosting": { "public": "./dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } }
bash
# firebaseに各種デプロイ(Firebase/Hosting) $ firebase deploy
WRITER
H.KAMIYAMA
@alclimb
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。