k01ken’s b10g

He110 W0r1d!

Vue

Nuxt.jsを使ってみる

Vue

開発環境は、Windows 10 Pro(64bit) + node v14.17.0 + npm 6.14.13。1.Cドライブ直下にnuxtという名前のディレクトリを作成し、カレントディレクトリしておく cd c:\ && mkdir nuxt && cd nuxt2.公式サイトへアクセスし、はじめるボタンをクリック 3.create…

VeeValidateを利用してフォームのバリデーションを行う

Vue

開発環境は、Windows 10 Pro(64bit) + Vue 2.6.12。フォームのバリデーションはわざわざ自分で実装するのも面倒なので、フレームワークを活用することにしました。今、使っているのはVue 2なので、VeeValidateのバージョンは最新は現時点で4なのですが、3を…

Vueでテキストフォームの値に応じて、ボタンを有効/無効にする

Vue

開発環境は、Windows 10 Pro(64bit) + Vue 2.6.12。現在のテキストフォームの値は、watchを使って監視をします。watchの中に、v-modelで紐づけているdataのオブジェクトのキー名を指定して、そのオブジェクトに変化があれば、watchがそれに応じて変化します…

Vuetifyの用途別の使い方まとめ

開発環境は、Windows 10 Pro(64bit) + vue 2.6.12 + vuetify 2.4.11。 ■始めに Vuetifyでは、ルートとなるコンポーネントには、template部分に、v-appタグで囲っておかないといけない。 ■参考リンク Application ■指定の要素を中央に寄せたい ※中央に寄せた…

Vue CLIを使う際に知っておきたいポイント

Vue

開発環境は、Windows 10 Pro(64bit) + node 14.17.0 + npm 6.14.13 + @vue/cli@4.5.12 + Vue 2.6.12。Vue CLIを使っていて、自分が知っておきたいポイントをメモしておきます。 ■新しいコンポーネントを追加した際にホットリロードを反映させたい ※Vue CLIの…

Go言語のGinとVue CLI間でHTTP Cookieのやりとりをする

開発環境は、Windows 10 Pro(64bit)。フロントエンドがVue.js、バックエンドがGin(Go言語)とした場合、開発時に、Go言語のマイクロWebフレームワークであるGinのWebサーバーと、Vue.JSの開発ツールであるVue CLIの開発用Webサーバー間で、それぞれ違うポート…

Webpack 5でVuetifyを使用する

開発環境は、Windows 10 Pro(64bit) + node v10.15.0。Vuetifyを使用する環境は、Vue CLIで紹介しているのが多かったのですが、自分は、Webpackを使用したかったので、メモ。1.Cドライブ直下に、以下のコマンドを1行ずつ入力してプロジェクトを作成 cd c:\ m…

webpackを用いてVue.jsの単一ファイルコンポーネントを実現する

開発環境は、Windows10 Professional(64bit) + Node v10.15.0 + npm 6.4.1。 1.以下のコマンドを1行ずつ入力してプロジェクトを作成する cd c:\ mkdir sample_vue cd sample_vue npm init -y2.以下のサイトのwebpack+Babel+Vue.jsの最小構成の欄を参考に、必…

Vue.jsを使う

開発環境は、Windows 7 Professional(32bit)。1.node.jsをインストールしている前提で、vue-cliをインストールする npm install -g vue-cli2.カレントディレクトリをC:\に移動して、以下のようなコマンドを入力する。 vue init テンプレート名 プロジェクト…