Vue.js
前提条件 手順 1. vue-gtagをインストールする 2. app.jsを編集する 実行結果 旧バージョンからGA4に移行する手順 1. 「GA4設定アシスト」を開く 2. 画面の指示に従う 3. 「データストリーム」を開く 4. 「測定ID」をメモする 参考 前提条件 VueRouterを利用…
Ⅰ. はじめに タイトルの通り「Vue3 + Vite + Javascript ObfuscatorでHelloWorldする方法」です。 Ⅱ. 手順 1. プロジェクトを新規作成する npm init vue@latest 2. パッケージをインストールする npm install npm install -D rollup-obfuscator javascript-o…
Ⅰ. はじめに タイトルの通り「Vue.js + Chart.jsで数値をカンマ区切りで表示する方法」です。 Ⅱ. やり方 1. 必要なパッケージをインストールする npm i vue-chartjs npm i chart.js 2. サンプルプログラムを書く src/components/LineChart.vue <script> import { Lin…
Ⅰ. はじめに 「やり方1」と「やり方2」の違い やり方1 のメリット やり方1 のデメリット やり方2 のメリット やり方2 のデメリット Ⅱ. 前提条件 Ⅲ. やり方1 1. ASP.NET Core の新規プロジェクトを作成する 2. Vue の新規プロジェクトを作成する 3. ファイル…
Ⅰ. はじめに タイトルの通り「CordovaでカスタムURLスキームに対応する方法」です。 Ⅱ. やり方 1. Cordova プラグインをインストールする cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp 2. プログラムを書く src/main.js …
Ⅰ. はじめに タイトルの通り「Laravel MixでWorkboxを利用してオフライン利用可能にする方法」です。 ※この記事では触れませんが manifest.json を追加で作成するとPWA化できます。 Ⅱ. やり方 1. パッケージをインストールする npm i -D workbox-sw npm i -D…
Ⅰ. はじめに Ⅱ. やり方 1. vue-router をインストールする 2. ファイルを編集する 3. ビルドする 4. Webサーバを起動する 実行結果 参考 Ⅰ. はじめに タイトルの通り「Laravel Mixでvue-routerを使う方法」です。 Ⅱ. やり方 1. vue-router をインストールす…
はじめに タイトルの通り「Vue.js + Bulma で ハンバーガーメニューをトグルする方法」です。 やり方 https://jsfiddle.net/fjd8v5sx/ 参考 https://bulma.io/documentation/components/navbar/
Ⅰ. はじめに タイトルの通り「v-for等で動的に生成した要素でv-modelを使う方法」です。 Ⅱ. やり方 https://jsfiddle.net/a5t24gm3 参考 https://stackoverflow.com/questions/34825065/vuejs-v-model-array-in-multiple-input
Ⅰ. はじめに タイトルの通り「Cordova + Vue.js で Cordovaのイベントを拾う方法」です。 Ⅱ. やり方 1. vue-cordova をインストールする npm install vue-cordova 2. プログラムを書く src/main.js import Vue from 'vue' import VueCordova from 'vue-cordo…
Ⅰ. はじめに Ⅱ. やり方 1. 必要なCLIツールをインストールする 2. Vueプロジェクトを作成する 3. firebaseをインストールする 4. Firebase でプロジェクトを作成する 5. Firebase の Realtime Database のルールを変更する 6. プログラムを書く 7. 実行する …
Ⅰ. はじめに タイトルの通り「Vue.js+webpackでCropperを使う方法」です。 Cropperは画像のトリミング用のjQueryプラグインですが、有志によりVue.js でも簡単に利用できるようにするパッケージが作成されています。Cropperの公式デモサイト https://fengyua…
Ⅰ. はじめに タイトルの通り「Laravel MixにESLintをインストールする方法」です。この記事は、以下の記事の通り作成した環境にESLintを導入する事を想定して書かれています。 Laravel 7.x で Vue.js を使う方法 - 備忘録 Ⅱ. やり方 1. 必要なパッケージをイ…
Ⅰ. はじめに タイトルの通り「Vue.js用のESLint環境を用意する方法」です。※Laravelを利用している場合はこちらの方法を推奨します。 https://kagasu.hatenablog.com/entry/2018/05/19/201521 Ⅱ. やり方 1. 必要なパッケージをインストールする npm install …
Ⅰ. はじめに タイトルの通り「Laravel 7.x, 8.x で Vue.js を使う方法」です。 LaravelにデフォルトでインストールされているLaravel Mixを利用する事でVue.jsの利用が簡単に出来ます。 Ⅱ. やり方 1. Laravel をベースにしてプロジェクトを作成する composer…
Ⅰ. はじめに タイトルの通り「Vue+webpackでlodashを使う方法」です。 Ⅱ. やり方 1. lodashをインストールする npm install lodash 2. src/main.js に 以下をコピペする import lodash from 'lodash' Object.defineProperty(Vue.prototype, '$lodash', { val…
Ⅰ. はじめに タイトルの通り「Vue.js + Onsen UI で ページを切り替える方法」です。 Ⅱ. やり方 1. App.vue を書き換える <v-ons-splitter-content> <component :is="$root.currentPage"></component> </v-ons-splitter-content> 2. main.js を書き換える import HomePage from './components/HomePage' const app = new Vue({ data () { return { currentPage:…
Ⅰ. はじめに Ⅱ. やり方 環境準備 1. vue-cliのインストール 2. cordovaのインストール 3. Vue.js +Onsen UI + webpack のテンプレートを使って初期化する 4. Cordova で 対象プラットフォームとして Android を追加する 実行 Cordova で Androidアプリとして…
Ⅰ. はじめに タイトルの通り「Vue.js で 子から親のdataにアクセスする」方法です。 この記事の方法でもアクセスできますが、推奨しません。他componentのデータやメソッド等にアクセスする必要を感じたときはStoreパターンやVuexを学んだ方が良いです。 ま…
Ⅰ. はじめに Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。 http://kagasu.hatenablog.com/entry/2017/07/24/082405上記で作った環境にBootstrap v4をインストールする方法です。※2018/12/04追記 現在のbootstrap-vue最新版である…
Ⅰ. はじめに タイトルの通り「Vue.js + webpack で helloworld する」方法です。 Ⅱ. やり方 1. vue-cliのインストール $ npm install -g vue-cli 2. Vue.js + webpack のテンプレートを使って初期化する $ vue init webpack my-project $ cd my-project $ np…
Ⅰ. はじめに タイトルの通り「Vue.jsでaxiosを使ってJSONデータを利用（GET）する方法」です。以下のJSONから [ { "name" : "name001" }, { "name" : "name002" }, { "name" : "name003" } ] 以下のように出力するサンプルです。 name001 name002 name003 ※F…
