初めに
どうも、最近あまり開発できていない人です。
この記事では、Vueプロジェクトの作成方法を細かいところまで紹介していきます。
この記事は、自分用のメモ帳(掲示板)を作る途中にまとめたものなので、掲示板を作る前提で話しています。
自身の開発の参考にこの記事を使う場合は、ミスらないように
バージョン
C:\> node -v
v16.10.0
C:\> npm -v
8.0.0
C:\> vue -V
@vue/cli 4.5.13
C:\> firebase -V
9.23.0
簡単な手順
- Vueプロジェクトを作る
- Firebase Realtime Databaseに接続
- Firebase OAuthを実装
- Netlifyにデプロイ
Vueプロジェクトの作成
ということで、始めていきましょう
最初は、Vue.jsのプロジェクトを作ります。
まぁ、作るといっても自動生成ですが（）
では、コンソールを用意しましょう。
Windowsの方は「Win + R」を入力したら出てくるやつに、「cmd」と入力してあげると、コマンドプロンプトが開きます。
便利ですよねー
余談ですが、僕は【Windows Terminal】を使ってます
コンソールをタブで管理できるので、便利です！
ちょっと脱線しましたが、用意したコンソールに以下のコマンドを入力しましょう。
C:\> vue ui
上のように二行でてきて、新しいタブが勝手に開いたら正解です
プロジェクトの場所を指定
さて、プロジェクトの作成をしていきます。
（まだリリースできてないやつは隠させてください...）
↑こんな画面になっていれば正解です
以下のような画面になっていた場合は、左下の家マークを押して少し待つと、上の画面になります
- 上のタブの真ん中「＋作成」をクリック
- プロジェクトディレクトリを置きたい場所に移動
- 下にある「+ ここに新しいプロジェクトを作成する」を押す
プロジェクトの詳細設定
上手くいっていれば、こんな画面になっていると思います。
- プロジェクト名を決める
- パッケージマネージャーを決める
プロジェクト名は、下にあるように、「掲示板」は「Bulletin Board」らしいので、「Bulletin」に決めました。
パッケージマネージャーはnpmです。
（yarn 使ったことない）
こんな感じになってます。
下の「次へ→」を押すと、次に進みます。
プロジェクトのプリセット
こんな画面になっているはずです。
僕は、しょっちゅうプロジェクトの作成をするので、プリセットが登録されていますが、ない人もいると思います。
なので、この記事では、「手動」を選択します。
「手動」を選択し、「次へ→」を押します。
プロジェクトの機能設定
このような画面になっていると思います。
なんか、ｺﾞﾁｬｺﾞﾁｬしてますね。
- Choose Vue Version
- Babel
- Router
- Vuex
- Linter / Formatter
にチェックをつけてください
それ以外は、オフで
チェックをつけ終わったら、下の「次へ→」をクリック！
プロジェクトの最終設定
このような画面になっていれば、正解です
現時点では、Vue 3.xはプラグインが不安定なので、Vue 2.xを使います。
Vue Routerはhistory modeを使うので、オンにしましょう
Linterのやつは、よくわからないので、三つ目の「Standard」って書いてあるやつにしました。
さて、ここまで設定が終了したら、下にある「✔ プロジェクトを作成する」をクリック！
そうすると、プリセットを作成するか聞かれます。
作成したい人は、わかりやすい名前を入力し、「プロジェクトを作成する」を押します
作成したくない人は、「保存なしで続ける」を押します。
そうすると、コンソールでインストールが始まります。
インストールが終了すると、このような画面になります。
この画面が表示されたら、プロジェクト作成完了です。
お疲れさまでした。
番外編
番外編として、プラグイン/依存のインストール方法を紹介していきます。
Vuetify(プラグイン)のインストール
僕がよく使う、「マテリアルコンポーネント」を追加してくれる
Vuetify
と呼ばれるプラグインを使います。
まず、サイドメニューの上から二つ目のアイコンを押し、プラグインページに行きます。
そうしたら、右上の「＋プラグインを追加する」をクリック
「Vuetify」を検索します。
一番上のVuetifyをクリックし、右下の「vue-cli-plugin-vuetifyをインストール」をクリック
インストールが開始するので、少し待ちます。
いくつか選択肢がありますが、「Default」にしてください。
そしたら、下にある「インストールを終了する」を押します。
このような画面になったと思います。
下にある「続ける」を押し、終了します。
Firebase(プロジェクト依存)のインストール
プロジェクトの名前の部分を押すとプロジェクト画面になります。
サイドバーの上から三つ目「依存」を押します
このような画面になっていると思います
そしたら、右上にある「＋依存をインストール」をクリックします
検索画面が出てくるので、「Firebase」と入力します。
候補の一番上を選択(クリック)し、右下の「↓ firebaseをインストール」をクリック
コンソールの方で、firebaseのインストールが始まります。
完了すると、自動的に画面が戻ります。
依存一覧に「firebase」があることが確認できれば、インストール完了です。
さいごに
いかがでしたか？
Vue.jsのプロジェクトって、VueUI使えば一瞬で作れます。
プラグイン/依存系もボタンをﾎﾟﾁﾎﾟﾁするだけで管理ができてしまうので、楽です。
みんなもやってみてね〜 ﾉｼ