ローカルにVue CLIで作成したプロジェクトをGitのリモートリポジトリにプッシュする手順

はじめに

いつもはGitHubでリポジトリを作成して、
クローンした後に、ローカルで初期のセットアップをして開発を進めていましたが
ローカルで作成したプロジェクトをGitHubにプッシュすることに挑戦してみました。

プロジェクトを作成

1.下記のnpmコマンドを実行してVue CLIをインストールします

npm install -g @vue/cli

yarn派の方はこちら

yarn global add @vue/cli

下記より引用

インストールが終われば、Vue CLIがインストールされていることを確認します

vue --version
>@vue/cli 5.0.8

2.プロジェクトを作成します

vue create sample-vue

vue create (プロジェクト名）で雛形を作成してくれます

3.プリセットを選択するよう求められます。今回は「Default ([Vue 3] babel, eslint)」を選択しました

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features 

Successfully createdが表示されればOK

🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.18
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 29.89s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 7.82s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sample-vue.
👉  Get started with the following commands:

 $ cd sample-vue
 $ yarn serve

Gitのリモートリポジトリへプッシュ

1.プロジェクトの階層へ移動します

cd sample-vue

プロジェクト名に適宜変えて実行してください

vue CLIを使わない場合には以下のコマンドを実行しますが
vue createコマンドの際に、コミットまで済ませてあるのでスキップします

git init
git add .
git commit -m 'first commit'

2.GitHubを開き、作成したプロジェクト名で(リモート)リポジトリを作成します
（GitHubの画面は省略）

(リモート)リポジトリを作成すると、コマンドがたくさん書かれてプッシュの案内があると思います

3.ブランチを選択します

git branch -M main

4.リモートリポジトリにaddします

git remote add origin https://github.com/(アカウントID）/sample-vue.git

5.リモートリポジトリにプッシュします

git push -u origin main

GitHubの画面を開き、履歴を確認すると
ローカルで作成したVueのプロジェクトがプッシュされていると思います

補足

ue uiというコマンドでGUI上でプロジェクトの管理ができるようです

vue ui

「#プロジェクトを作成-手順3」のプリセットを選択する箇所で
「Manually select features」を選択すると、機能を選択する案内があります

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to 
invert selection, and <enter> to proceed)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

先ほど選択した機能を次回に再利用するように保存されるか聞かれるので、再利用したい場合は"y"を入力しましょう

Save this as a preset for future projects?