ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

Vue

Railsからvueへpropsへデータの受け渡し方法

下記の例では、Rails側のテンプレートで items/show.html.slim の id="recommend-category" の dataに code と item-group-codeを設定しています。(ケバブケースが良い様です) items/show.html.slim #recommend-category(data-code="#{@item_group.code}" da…

Rails x Vue x Graphql x webpackerの IE11対応

自分用のメモ Graphql (Apollo) の実行に 下記が必要。 たぶん fetch するため isomorphic-unfetch yarn add isomorphic-unfetch app/javascript/packs/application.js に下記を追加 import "core-js/stable"; import "regenerator-runtime/runtime"; import…

Rails x Vue 環境に Buefyをinstall する

yarn で buefyをinstall $yarn add buefy app/javascript/packs/application.js に下記を追加 import Vue from 'vue' import Buefy from 'buefy' import 'buefy/dist/buefy.css' Vue.use(Buefy) 以上です 参考サイト buefy.org 関連記事 marketing-web.haten…

MacでHeroku cli をインストールする。

mac で heroku-cli をインストールします $ brew tap heroku/brew && brew install heroku インストール完了後 $ heroku -v をして、下記のようにversionが返ってくれば成功です。 heroku/7.35.1 darwin-x64 node-v12.13.0 devcenter.heroku.com 関連記事 プ…

Font AwesomeをVue.jsにインストールして使う

Vue.jsにFont Awesomeをインストールして使います。 インストール 下記のパッケージをインストールします。 $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/vue-fontawes…

Vue Nativeをインストールしてみたら想像以上に簡単だった!

これまで、React Nativeが気になりながらも、学習コストを考えてVueを選択していたのですがVue Native が登場したんですね! 嬉しい状況です。 vue-native.io 早速、インストールから、最初の起動までを試してみました。 パッケージのインストール vue-nativ…

vue cli で Github の graphql (API)を vue-apolloを使って叩く

vueのインストール vue init webpack my-project 何個か質問されるので、回答しながら進んでください。 インストール終わったら、 パッケージをインストールして、起動! cd my-project npm install npm run dev vue-apolloのインストール vueからgraphqlを…

Nuxt.jsをインストールする

Nuxtをインストールしていきます。 今回は、nuxt_testというプロジェクト名で作るようになっていますが、 適宜変更してください。 また、vue-cliを使っていますが、 インストールしていなければ、下記でインストールすることができます。 npm install -g vue…