プロファイルの反映

Vue.js案件の開発でMac端末が必要になったので、久々に初期化されたMacBookAirを引っ張り出して下記の手順で環境構築を行ったらエラーが発生。

備忘録として、手順を残すことにした。

 

Visual studio Codeのインストール

 

code.visualstudio.com

 

Node.jsのインストール

nodejs.org

 

 

③ターミナルでNode.jsインストール確認コマンドを入力

npm --version

 

 

④Vue CLIのインストール

npm install -g @vue/cli

 

⑤Vueプロジェクトの作成

vue ui

 

ん?command not foundエラーが発生した。

以下のコマンドを使ってVueを削除。

npm uninstall-g @vue/cli

 

 

再び④を実行。・・・⑤も実行。

また、command not foundエラーが発生。

PATHが通ってなかった。

 

⑥.bash_profileにPATHを追加

export PATH=$PATH:/Users/(ユーザーディレクトリ)/.npm-global/bin

 

再び⑤を実行。command not foundが発生。なぜだ!?

と思ったら、.bash_profileに追加した情報が反映されていなかった。

 

⑦.bash_profileを反映

ターミナルを再起動してログインしなおすか$ source .bash_profileのどちらかを実行。

 

晴れてPATHが通って、vueコマンドが実行できるようになった。

 

以上。

ポートフォリオの変更(フォームクリア機能)

f:id:arowe:20200623185923p:plain

問い合わせフォームに「クリア」ボタンを追加しました。

 

<div class="text-center">
  <v-btn
    :loading="contactForm.loading"
    :disabled="!contactFormValidation.valid"
    @click="sendMail()"
    class="mt-4 ma-2 font-weight-bold"
    color="info"
    large
   >{{ submit }}
</v-btn>
  <v-btn
    :loading="contactForm.loading"
    @click="formReset()" 
    class="mt-4 ma-2 font-weight-bold" 
    color="Normal"
    outlined 
    large
   >{{ reset }}
</v-btn>
 </div>

「クリア」ボタンの色をどうしようかと思いましたが、Nomalがベタっぽい気がします。 

ポートフォリオの変更(カルーセル表示)

f:id:arowe:20200623182845p:plain

トップ上部を「カルーセル」表示に切り替えました。

 

vuetifyjs.com

 

data関数にカルーセルの画像を切り替えるアイテムを定義してあげる。

<v-carousel>
  <v-carousel-item
     v-for="(item,iin items"
     :key="i"
     :src="item.src"
     reverse-transition="fade-transition"
     transition="fade-transition">
 
・・・ ・・・
 </v-carousel-item>
</v-carousel>

<script>
data: () => ({
 items: [
  { src: xxxx01.jpg }
  { src: xxxx02.jpg }
     ・・・  ・・・
 ],
}),
</script>

 

こんな感じです。

Vuetifyではじめるポートフォリオ作成その1

Vuetifyのv-containerをv-app-barの中で使ったりmax-widthをBootstrap ...

 

Vuetify(ヴューティファイ)

 

こんにちわ。あろぅです。
今日はVue.jsの学習の延長で、マテリアルUIの「Vuetify」を使って自身のポートフォリオサイトを作ろうと思います。

就活時代、自己PRの目的で自身のHP(静的ページ)を作ったことはありましたが、今は当時とは比べ物にならないくらいデザイン性と多機能化が進んでいて、一からデザインを作成することを考えると頭がオーバーヒートしそうになります。そこで、マテリアルUIのテンプレートを使って、簡単にカッこいい自身のポートフォリオを作ろうと思ったわけです。

そんなわけで、次回からポートフォリオを実際に公開するまでの工程を順にご紹介しようと思います。

 

では、今日はここまで。