ポートフォリオページを作りたいので、とりあえず環境周りを整えます！
どなたかの参考になれば幸いです
#環境
- Windows10
- Node.jsはnvm-windowsで今の推奨版14.17.0を設定中
- npmはしれっと入っていた6.14.13
※nodeとnpmは以前導入の記事をあげてますのでよければどうぞ！
→ nvm-windowsでnode.jsのバージョン管理をする【Windows】
#目次
- Vue CLIでプロジェクトを作る
- GitHubで管理できるようにする
- Firebaseでデプロイしてみる
#1. Vue CLIでプロジェクトを作る
##1-1. Vue CLIをインストール
$npm install -g @vue/cli
// わーっとインストールが走ります
$vue —-version
// バージョンの数字が出ればインストールOK！
##1-2. UIを起動
$vue ui
ブラウザでUI画面が起動します。
コマンドの方は自動で終了しませんが、これでブラウザが見れるようになっているので
作業が終わるまで終了しないようにしてください。
##1-3. Vueプロジェクトを作成
ブラウザのUIで作業していきます。
黒い画面アレルギーには大変うれしい機能ですね！
- 「作成」タブを開く
- フォルダを指定して、「ここに新しいプロジェクトを作成する」をクリック
- 「詳細」タブでプロジェクト名などを指定し、「次へ→」
- 「プリセット」タブで「Default preset(Vue 3)」を選択する
- 「プロジェクトを作成する」！
- ちょい待ちます（2〜3分くらい）
- プロジェクトフォルダができました！
2で指定したフォルダを確認してみましょう！
##1-4. 起動してみる
コンソールで作ったフォルダに移動して、起動します。
$npm run serve
うにゃうにゃ出た後にLocal:http://localhost～というのが出るので
ブラウザで開いてみます。
「Welcome to Your Vue.is App」というVueの画面が出ればOKです！やったー！
#2. GitHubで管理できるようにする
ローカルで作ったフォルダをGitHubでバージョン管理できるようにしていきます。
- GitHubで空のリポジトリを作る
-
$git init（gitプロジェクト化する） -
$git add.（全部addする） -
$git commit -m "first commit"（コミット） $git remote add origin https://github.com/xxxx/xxxx.git$git push -u origin master
5では1で作ったリポジトリを指定します。
GitHubで、Code→HTTPSにあるURLを使ってください。
GitHubのリポジトリページを更新してみましょう、コミットした内容が出るはずです！
#3. Firebaseでデプロイしてみる
デプロイの工程は最後に行うので環境なども最後でもいいんですが、
手順把握のためとここまでで問題ないかの確認のため、
ページができたらすぐアップできるぞ～というモチベのために
環境を整えてアップしてみます。
この辺りはきれいにまとまっている記事があり、
特筆することもなく見事にそのままできたので参考にした記事をご紹介します！
Firebaseのインストール～デプロイする
まず、こちらのページにある手順を通します！
400エラーになった
こちらの記事でインストールからデプロイまではできたのですが、コンソールに
Failed to load resource: the server responded with a status of 400 ()
というエラーが出て画面が真っ白に・・
修正方法の記事もございました、ありがたいです！
ローカルじゃないURLで確認ができました！
そのままでも問題ありませんが、
私はなんとなく気持ち悪かったのでデプロイは取り消しておきました。
実装が終わったらまたデプロイします
たのしみですね！
#まとめ
初回のみのインストール作業などもありますが、
次回からはこの手順を通せばサクッと作業が始められるようになったかと思います！
初期作業がめんどくさいという言い訳封じができたのでモリモリ作っていきたいですね
ありがとうございました