備忘録

備忘録

Vue.js

Cordova + Vue.js で Cordova のイベントを拾う方法

Ⅰ. はじめに タイトルの通り「Cordova + Vue.js で Cordovaのイベントを拾う方法」です。 Ⅱ. やり方 1. vue-cordova をインストールする npm install vue-cordova 2. プログラムを書く src/main.js import Vue from 'vue' import VueCordova from 'vue-cordo…

Firebase+webpack+Vue.jsでチャットを作る方法

Ⅰ. はじめに Ⅱ. やり方 1. 必要なCLIツールをインストールする 2. Vueプロジェクトを作成する 3. firebaseをインストールする 4. Firebase でプロジェクトを作成する 5. Firebase の Realtime Database のルールを変更する 6. プログラムを書く 7. 実行する …

Vue.js+webpackでCropperを使う方法

Ⅰ. はじめに タイトルの通り「Vue.js+webpackでCropperを使う方法」です。 Cropperは画像のトリミング用のjQueryプラグインですが、有志によりVue.js でも簡単に利用できるようにするパッケージが作成されています。Cropperの公式デモサイト https://fengyua…

Laravel MixにESLintをインストールする方法

Ⅰ. はじめに タイトルの通り「Laravel MixにESLintをインストールする方法」です。この記事は、以下の記事の通り作成した環境にESLintを導入する事を想定して書かれています。 LaravelでVue.jsを使う方法 - 備忘録 Ⅱ. やり方 1. 必要なパッケージをインスト…

Vue.js用のESLint環境を用意する方法

Ⅰ. はじめに タイトルの通り「Vue.js用のESLint環境を用意する方法」です。※Laravelを利用している場合はこちらの方法を推奨します。 https://kagasu.hatenablog.com/entry/2018/05/19/201521 Ⅱ. やり方 1. 必要なパッケージをインストールする npm install …

LaravelでVue.jsを使う方法

Ⅰ. はじめに タイトルの通り「LaravelでVue.jsを使う方法」です。 LaravelにデフォルトでインストールされているLaravel Mixを利用する事でVue.jsの利用が簡単に出来ます。 Ⅱ. やり方 1. Laravel をベースにしてプロジェクトを作成する composer create-proj…

Vue+webpackでlodashを使う方法

Ⅰ. はじめに タイトルの通り「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 で ページを切り替える方法

Ⅰ. はじめに タイトルの通り「Vue.js + Onsen UI で ページを切り替える方法」です。 この方法が推奨されているやり方かどうかは不明です…。 Ⅱ. やり方 1. App.vue を書き換える <v-ons-splitter-content> <component :is="currentPage"></component> </v-ons-splitter-content> import HomePage from './components/HomePage' import AboutPage from './…

Cordova + Vue.js + Onsen UI + ESLint + webpack で helloworld する

Ⅰ. はじめに Ⅱ. やり方 環境準備 1. vue-cliのインストール 2. cordovaのインストール 3. Vue.js +Onsen UI + webpack のテンプレートを使って初期化する 4. Cordova で 対象プラットフォームとして Android を追加する 実行 Cordova で Androidアプリとして…

Vue.js で 子から親のdataにアクセスする

Ⅰ. はじめに タイトルの通り「Vue.js で 子から親のdataにアクセスする」方法です。 この記事の方法でもアクセスできますが、推奨しません。他componentのデータやメソッド等にアクセスする必要を感じたときはStoreパターンやVuexを学んだ方が良いです。 ま…

Vue.js + webpack で Bootstrap を使う

Ⅰ. はじめに Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。 http://kagasu.hatenablog.com/entry/2017/07/24/082405上記で作った環境にBootstrap v4をインストールする方法です。 Ⅱ. やり方 1. bootstrap-vue をインストール $ np…

Vue.js + webpack で helloworld する

Ⅰ. はじめに タイトルの通り「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データを利用する

Ⅰ. はじめに タイトルの通り「Vue.jsでaxiosを使ってJSONデータを利用する」サンプルです。FetchAPIを使う方法はこちら http://kagasu.hatenablog.com/entry/2017/12/16/163725以下のJSONから [ { "name" : "name001" }, { "name" : "name002" }, { "name" :…