LoginSignup
0

More than 1 year has passed since last update.

Vue.jsのプロジェクトをVue UIを使って作成しよう!

Posted at

初めに

どうも、最近あまり開発できていない人です。

この記事では、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

簡単な手順

  1. Vueプロジェクトを作る
  2. Firebase Realtime Databaseに接続
  3. Firebase OAuthを実装
  4. Netlifyにデプロイ

Vueプロジェクトの作成

ということで、始めていきましょう

最初は、Vue.jsのプロジェクトを作ります。
まぁ、作るといっても自動生成ですが()

では、コンソールを用意しましょう。
Windowsの方は「Win + R」を入力したら出てくるやつに、「cmd」と入力してあげると、コマンドプロンプトが開きます。
image.png
便利ですよねー

余談ですが、僕は【Windows Terminal】を使ってます
コンソールをタブで管理できるので、便利です!

ちょっと脱線しましたが、用意したコンソールに以下のコマンドを入力しましょう。

C:\> vue ui

image.png
上のように二行でてきて、新しいタブが勝手に開いたら正解です

プロジェクトの場所を指定

さて、プロジェクトの作成をしていきます。
image.png
(まだリリースできてないやつは隠させてください...)

↑こんな画面になっていれば正解です

以下のような画面になっていた場合は、左下の家マークを押して少し待つと、上の画面になります
image.png


  1. 上のタブの真ん中「+作成」をクリック
  2. プロジェクトディレクトリを置きたい場所に移動
  3. 下にある「+ ここに新しいプロジェクトを作成する」を押す
    image.png

プロジェクトの詳細設定

image.png

上手くいっていれば、こんな画面になっていると思います。

  1. プロジェクト名を決める
  2. パッケージマネージャーを決める

プロジェクト名は、下にあるように、「掲示板」は「Bulletin Board」らしいので、「Bulletin」に決めました。
image.png

パッケージマネージャーはnpmです。
(yarn 使ったことない)

image.png
こんな感じになってます。

下の「次へ→」を押すと、次に進みます。

プロジェクトのプリセット

image.png
こんな画面になっているはずです。
僕は、しょっちゅうプロジェクトの作成をするので、プリセットが登録されていますが、ない人もいると思います。
なので、この記事では、「手動」を選択します。

image.png
「手動」を選択し、「次へ→」を押します。

プロジェクトの機能設定

image.png
このような画面になっていると思います。
なんか、ゴチャゴチャしてますね。


  • Choose Vue Version
  • Babel
  • Router
  • Vuex
  • Linter / Formatter

にチェックをつけてください
それ以外は、オフで

チェックをつけ終わったら、下の「次へ→」をクリック!

プロジェクトの最終設定

image.png
このような画面になっていれば、正解です

現時点では、Vue 3.xはプラグインが不安定なので、Vue 2.xを使います。
Vue Routerはhistory modeを使うので、オンにしましょう
Linterのやつは、よくわからないので、三つ目の「Standard」って書いてあるやつにしました。
image.png

image.png
さて、ここまで設定が終了したら、下にある「✔ プロジェクトを作成する」をクリック!
そうすると、プリセットを作成するか聞かれます。
image.png
作成したい人は、わかりやすい名前を入力し、「プロジェクトを作成する」を押します
作成したくない人は、「保存なしで続ける」を押します。

そうすると、コンソールでインストールが始まります。
image.png

インストールが終了すると、このような画面になります。
image.png

この画面が表示されたら、プロジェクト作成完了です。
お疲れさまでした。

番外編

番外編として、プラグイン/依存のインストール方法を紹介していきます。

Vuetify(プラグイン)のインストール

僕がよく使う、「マテリアルコンポーネント」を追加してくれる
Vuetify
と呼ばれるプラグインを使います。

まず、サイドメニューの上から二つ目のアイコンを押し、プラグインページに行きます。
image.png

そうしたら、右上の「+プラグインを追加する」をクリック

「Vuetify」を検索します。
image.png

一番上のVuetifyをクリックし、右下の「vue-cli-plugin-vuetifyをインストール」をクリック
image.png

インストールが開始するので、少し待ちます。
image.png
いくつか選択肢がありますが、「Default」にしてください。

そしたら、下にある「インストールを終了する」を押します。
image.png
このような画面になったと思います。
下にある「続ける」を押し、終了します。

Firebase(プロジェクト依存)のインストール

プロジェクトの名前の部分を押すとプロジェクト画面になります。

サイドバーの上から三つ目「依存」を押します
image.png
このような画面になっていると思います

そしたら、右上にある「+依存をインストール」をクリックします

検索画面が出てくるので、「Firebase」と入力します。
image.png

候補の一番上を選択(クリック)し、右下の「↓ firebaseをインストール」をクリック

コンソールの方で、firebaseのインストールが始まります。
image.png

完了すると、自動的に画面が戻ります。
image.png
依存一覧に「firebase」があることが確認できれば、インストール完了です。

さいごに

いかがでしたか?

Vue.jsのプロジェクトって、VueUI使えば一瞬で作れます。
プラグイン/依存系もボタンをポチポチするだけで管理ができてしまうので、楽です。

みんなもやってみてね〜 ノシ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0