スポンサーリンク
概要
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への登録までが完了しました。