2018-12-01から1ヶ月間の記事一覧

Bootstrap4のNavbarをモバイル対応

ポートフォリオサイトのはNavbarにモバイル対応をした時に 意外と手こずったので備忘録として残します。Shuichi's portfolioモバイル画面で画面が崩れる場合にItemをドロップダウン表示するボタンを追加しました。.navbar-toggler-icon アイコン表示 .data-t…

Google Formでお問い合わせページを作成

今日はポートフォリオサイトのうち未完成だったお問い合わせページを作成していました。https://myportfolioproject-a67bf.firebaseapp.com/contact これで一応ひととおり作成しなんとか形になりました。 ただしSEOの施策がまだまだなので随時対応するつもり…

ポートフォリオサイトをFirebaseで公開

Vue CLIを開発したポートフォリオサイトですが 問い合わせページを除き一通り作成しました。これまで作成したページにつきましてFirebaseで公開しました。 Shuichi's portfolioまだ問い合わせページができていないので これから作成して更新します。技術的な…

Vue CLI3のプロジェクトをFirebaseで公開するまでにやったこと

Vue CLIを開発したプロジェクトをFirebaseで公開するために以下のことを行いました。これからVue.jsをやってみたい人の 学習の手助けになれば幸いです。手順は難しいものでなく 公式サイトで紹介されている手順通りにやれば大丈夫でした。 やったこと Fireba…

Vue CLI3のプロジェクトにportfolioのページを作る

前回の続きです。これからVue.jsをやってみたい人の 学習の手助けになれば幸いです。簡単ですが ポートフォリオサイトをAboutページを作成してみました。components/About.vue <template> <div class="about"> <h1 class="title">自己紹介</h1> <div class="container"> <div class="row"> <div class="col-sm-4"> <img src="../assets/about.jpg" width="300px" alt=""> </div> </div></div></div></template>

Vue CLI3のプロジェクトにBootstrapのJumbotronのページを作る

前回の続きです。これからVue.jsをやってみたい人の 学習の手助けになれば幸いです。現在ポートフォリオサイトを制作中です。そのトップページを見栄え良く見せるために BootstrapのJumbtronを使ってみました。components/Home.vue <template> <div class="jumbotron jumbotron-fluid bg-info"> <div class="container"> <h1 class="display-4">Welcome to My portfol</h1></div></div></template>…

Vue CLI3のプロジェクトにBootstrapのNavbarを作成する

前回の続きです。hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。現在ポートフォリオサイトを制作中です。 これらの画面上部に表示するナビゲーションバーを作成しました。 スタイルはBootstrapを利用しました。 …

Vue Router Not Foundページを作成

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。今日からポートフォリオサイトを制作しております。前回Vue Routerでルーティングを追加しましたが URLがマッチしない場合のNot Foundページも作…

Vue Router ルーティングを追加

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。今日からポートフォリオサイトを制作しております。今回はこれまで作成したプロジェクトに対し Vue Routerでルーティングを追加しました。 ペー…

Vue Router URLに含まれる#(シャープ)を取り除く

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。 URLに#(シャープ)が含まれる Home, Aboutページ表示するとURLに#(シャープ)が含まれていました。 http://localhost:8080/#/ http://localhost:8…

Vue.jsの画面でリロード時, sockjs-node infoが失敗

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。 sockjs-node/infoが失敗 画面をリロードすると以下の非同期通信が繰り返されるようになりました。chrome Devtool 画面のHome, Aboutのリンクク…

Vue CLI 3で作成したプロジェクトにVue Routerを追加する

Vue CLI3で作成したプロジェクトにGUI画面でVue Routerを追加しました。 前回GUI画面でプロシェクトを表示させた続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の足がかりになれば幸いです。 vue ui GUI画面を起動 vue ui Star…

Vue CLI 3で作成したプロジェクトをGUI画面に表示させる

Vue CLI3 で作成したプロジェクトにVue Routerを追加することが Vue CLIのGUIの操作だけでできました。今回は前段階としてGUI画面で表示させたところまでを書きます。 vue ui cli.vuejs.orgこれからVue.jsをやってみたい人の 学習の足がかりになれば幸いです…

Vue CLI 3で作成したプロジェクトにBootstrapを導入する

Bootstrapの公式サイトを参考に 前回Vue CLI3で作成したプロジェクトにBootstrapを導入しました。Vue CLI 3でプロジェクト作成 - hiramatch's blogこれからVue.jsをやってみたい人の 学習の足がかりになれば幸いです。 Package managers 参考 https://getboo…

Vue CLI 3でプロジェクト作成

Vue CLI3のの公式サイトを参考に Vue.jsのプロジェクトを新規作成してみました。Vue CLI 公式サイト Vue CLI 3これからVue.jsをやってみたい人の 学習の足がかりになれば幸いです。 Creating a Project vue create vue create コマンド vue create hello-wor…

Vue.jsで簡単なHello worldの画面を作る

以前Vue.jsを用いたフロントエンドのでの開発をやらせていただいた経験があります。ここ最近サーバサイド関連が多くしばらく触っていなかったのですが 復習のため再度学習を始めました。その第一歩として Vue CLI3のの公式サイトを参考に Vue.jsでHello worl…