nobu blog

プログラミングやゲームの話など。

*



vue.js(vuetify)で新規作成したサイトをgithubに登録するまで

      2019/12/30

概要

vue.js(vuetify)で作成したサイトをgithubに登録するまでの手順をメモです。

環境及び準備

Windows 10
VSCode

npmインストール済
githubのアカウントは作成済

スポンサーリンク

手順

vue CLIのインストール

vueアプリの各種インストールやビルド等を行うツールのvue CLIをnpmからインストールします。
gオプションをつけてグローバルインストールします。

npm install @vue/cli -g

vueアプリの作成

vue CLIをインストールしたら早速使用してアプリを作成します。

vue create my-app

my-appの部分は任意の名称としてください。
コマンドを実行すると、作成のオプションを選択が表示されますが、ここではdefault(babel, eslint)を選択します。
各種インストールが始まり、暫く時間がかかるの待ちます。
完了すると、my-appフォルダが作成されるので、
cd my-app
でカレントディレクトの移動をします。

vuetifyのインストール

vue.jsで使用できるUIフレームワークのvuetifyをインストールします。
下記のコマンドでインストールが開始されます。
vue add vuetify

作成のオプションが表示されるので、Default (recommended)を選択します。
vuetifyのインストールが始まるのでしばらく待ちます。

ビルド

これでvuetifyのインストールまでが終わったのでいったん、ビルドを行ってアプリを起動させてみます。
下記のコマンドを入力してください、

npm run serve

ビルドが始まり、しばらくするとurlが表示されます。
(例:http://localhost:8080/)
表示されたURLにブラウザでアクセスすると、vuetifyのサンプルページが表示されます。

githubのリポジトリ作成

ここでいったん、githubのリポジトリ作成を行います。
githubのマイページにアクセスし、下記のXXXXX

githubへのプッシュ

作成したリポジトリに対してpushを行います。
まずはローカルのgitリポジトリにコミットを行います。

git add .
git commit -m “first commit”

addでファイルを追加し、commitでローカルリポジトリにコミットします。”first commit”は任意のメッセージに変更してください。

終わったらリモートリポジトリの登録とプッシュを行います。
git remote add origin https://github.com/アカウント名/リポジトリ名.git
git push -u origin master

以上でgithubへの登録までが完了しました。

 - Javascript, Visual Studio Code, Vue.js