はじめに

※不備不足、不適切な説明がありましたらご指摘ください。

Vue-CLIで作成したプロジェクトのソース管理をGitで行いたいと思いました。

開発環境

・OS：Windows 10 Home

バージョン情報

node.js、npm、vue-cli、gitのバージョンは以下の通り。

powershell

$node --version
v16.13.0

$npm --version
8.1.0

$vue --version
@vue/cli 4.5.15

$git --version
git version 2.33.0.windows.2

vueのプロジェクト作成

powershellで以下のコマンドを入力します。simplyがプロジェクト名になります。

powershell

$vue create simply

Please pick a presetではManually select featuresを選択して、以下のように設定しました。

powershell

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

cd simplyでディレクトリを移動してnpm run serveを入力します。
http://localhost:8080/を開くとWelcome to Your Vue.js Appの画面が表示されます。

gitにコミット

まずはgitHubのアカウントを作成してください。ここはいろんなサイトで紹介されているので省略します。
続いてgitHubとVSCodeの連携を行います。こちらが分かりやすいので参照してください。
VSCodeを開いて画面左上のファイル→フォルダーを開くから先ほど作成したsimplyのフォルダを開きます。
続いて、左ペインの中からソース管理を選択すると「変更の発行」というボタンが表示されていますので、こちらをクリックします。

gitHubのサインインを求められるので、「許可」します。

VSCodeがgitHubにアクセスするのを許可するかを聞かれるので、Continueを押します。

もう一度サインインを求められるので、サインインします。

成功するとホームページからVSCodeを開こうとしますので、開きます。
VSCode上でこのような画面が表示されるので、開くを押します。

画面上にprivate repositoryとpublic repositoryのどちらでプッシュするかを聞かれるので、今回はprivateを選択します。gitHub上でprivateとpublicの変更ができます。

またサインインを求められるので、Sign in with your browwerでサインインします。

連携がうまくいくと以下の画面が表示されます。「画面を閉じてアプリケーションに戻れ！」といわれるので指示に従います。

VSCodeに戻ると画面右下に正常にリポジトリが作成された旨のメッセージが表示されます（スクショ撮り忘れた）。
gitHubにログインしてみるとsimplyというリポジトリが作成されています。

VSCodeでのプル・コミット・プッシュの解説

プル

プルとは、リモートリポジトリからコンテンツをフェッチしてダウンロードし、そのコンテンツと一致するようローカルリポジトリを即座に更新するコマンドです。
ソース管理横[…]を押し、「プル、プッシュ」→「プル」を押すと実行できます。

コミット

コミットとは、追加・変更したファイルをgitに登録するためのコマンドです。
試してみます。VSCodeでsrc->App.vueのtemplateタグの中を以下のように修正して保存します。h1タグでHellow, world!を追加しています。

App.vue

<template>
  <h1>Hello, world!</h1>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

ソース管理のペインを押すと「変更」の部分に先ほど修正したファイル名が表示されます。こちらを押すと、先ほど追加した「Hello, world!」が右側のタブに表示されます。左が修正前、右が修正後です。
ファイル名横の＋を押して変更をステージします。

ステージすると、「ステージされている変更」の下にファイル名が表示されます。
上のフォームにコミット時のメッセージを入力します。メッセージを入力しないとコミットできません。今回は「Hello, world!の追加」とします。
「ソース管理」横の✓を押すと、コミットが行われます。

プッシュ

プッシュとは、ローカルの変更を中央リポジトリに公開・アップロードするときに使用するコマンドです。
実際に試してみます。
先ほどコミットした後、「変更の同期」というボタンが表示されます。こちらのボタンを押します。または、ソース管理横の[…]を押し、「プル、プッシュ」→「プッシュ」を押すとプッシュが行われます。

プッシュが実行されたら、gitHubで確認してみましょう。先ほどのHello world!がプッシュされているのが分かります。

便利な拡張機能紹介

gitに関する便利な拡張機能を紹介します。

Git Graph

gitのコミットグラフをいい感じで表示してくれます。
使い方は、ソース管理ペインから[...]の一個左のマークを押すだけ。GitGraphのタブが開いてコミットのグラフをわかりやすく表示してくれます。

GitLens — Git supercharged

VSCodeのgitの機能をいろいろ強化してくれます。いろんなことやってくれるので、詳しくはこちらを確認してください。
個人的にありがたいのは、その行を誰がいつ、どのコミットで修正したのかを行の後ろに表示してくれるところ。複数人で開発しているとこれがかなりありがたい。

終わりに

個人開発の準備はできたので、これでなんか作っていこうと思います。
誰かの参考になれば幸いです。