【Vue】プロジェクトの作成から GitHub への Push まで

ここ最近というか初めて本格的にフロント技術を学んでいます。採用したフレームワークは大人気 Vue.js です。

自分で学びながらチュートリアルの記事も書きました。
www.shookuro.com

今回は Vue.-cli でプロジェクトを作成し、そのプロジェクトを GitHub に Push するまでの方法をメモしておきたいと思います。

node と npm と vue はインストールしておいてください。参考ページです。
FN1807002 | Vue CLI 3入門 02: インストールする | HTML5 : テクニカルノート

この記事のプログラムは次のバージョンで作成しました。

C:\yyama>node --version
v10.11.0

C:\yyama>npm --version
6.4.1

C:\yyama>vue --version
3.4.0

Vue プロジェクトの作成

まず、ターミナル（コマンドプロンプト）を起動し、プロジェクトを作成したいディレクトリに移動します。私は「C:\yyama」配下にプロジェクトを作成したいので「cd C:\yyama」としました。

そして次のコマンドを打ちます。sample はプロジェクト名です。

vue create sample

プロジェクトに含める機能の種類をいろいろ聞かれるので、マニュアルを選択し最終的に次のように選択しました。

C:\yyama>vue create sample


Vue CLI v3.4.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

5 分くらい待つと実行が終わってプロジェクトが作成されます。

とりあえず次のコマンドを打って、起動確認はやっておきます。

C:\yyama>cd sample

C:\yyama\sample>npm run serve

ブラウザを開き「http://localhost:8080」にアクセスすると、vue-cli で作成したプロジェクトのデフォルトページが表示されました。
f:id:yyama1556:20190201152302p:plain
　
これで準備完了です。

このプロジェクトを GitHub に Push していこうと思います。
　
　

プロジェクトが Git 管理下にあることの確認

なんとこの時点ですでにこのプロジェクトは Git 管理下に置かれています。Windows の場合は「dir /a」で .git フォルダが作成されていることが確認できると思います。

C:\yyama\sample>dir /a
 ドライブ C のボリューム ラベルは Windows です
 ボリューム シリアル番号は E417-10DB です

 C:\yyama\sample のディレクトリ

2019/02/01  15:06    <DIR>          .
2019/02/01  15:06    <DIR>          ..
2019/02/01  15:05                33 .browserslistrc
2019/02/01  15:06               335 .eslintrc.js
2019/02/01  15:43    <DIR>          .git
2019/02/01  15:05               214 .gitignore
2019/02/01  15:06                46 babel.config.js
2019/02/01  15:19    <DIR>          node_modules
2019/02/01  15:06           392,796 package-lock.json
2019/02/01  15:05               634 package.json
2019/02/01  15:06                60 postcss.config.js
2019/02/01  15:05    <DIR>          public
2019/02/01  15:06               359 README.md
2019/02/01  15:05    <DIR>          src

また「git log」や「git status」で確認するとすでにコミットも済んでいます。
　
　

GitHub リポジトリの作成

GitHub ログイン後のトップページから、Repositories の New ボタンをクリックします。
f:id:yyama1556:20190201153525p:plain

Create a new repository の画面に遷移するので、リポジトリ名や説明、ライセンス等を入力して画面下のほうにある Create repository ボタンをクリックします。
f:id:yyama1556:20190201153636p:plain
　
これでリポジトリが作成されました。
f:id:yyama1556:20190201153755p:plain
　

プロジェクトを GitHub に Push する

それではいよいよプロジェクトを GitHub に Push していきたいと思います。

ターミナル（コマンドプロンプト）を使って入力していく手順はこうです。

「git remote add origin https://github.com/yyama694/sample」で origin に先ほど作った GitHub リポジトリを登録します。http://～の部分はご自分の GitHub リポジトリを指定してください。
「git merge --allow-unrelated-histories origin/master」で GitHub 上で作成されたライセンス等のファイルをローカルにマージします。ちなみに無関係な履歴を持つブランチ同士をマージするには --allow-unrelated-histories が必要です。初めてGitHubリポジトリにpushしたらrejectedエラーになったときの対応メモ - Qiita
「git push --set-upstream origin master」でローカルのファイル群を GitHub に Push します。

GitHub の画面でも Push が成功していることを確認できると思います。
　