[B! vue] master1223のブックマーク

1年間単体テストを書き続けた現場から送る Vue Component のテスト / Vue Component Test - Speaker Deck

Vue Fes Japan 2018 の 1年間単体テストを書き続けた現場から送る Vue Component のテスト https://vuefes.jp/

master1223 2019/10/24

リンク

Vue.jsとRailsの最適な融合を考える - メドピア開発者ブログ

もう新年を迎えて2ヶ月が経ちますね。多くの人は新年の目標を立てますが、皆さんは何かしら立てましたでしょうか? 英語を毎日勉強するという目標を立てましたが、既に挫折してしまったエンジニアの村上(pipopotamasu (pipopotamasu) · GitHub)です。本日はその懺悔も込めてVue.jsとRailsの話をお送りします。この記事を書く背景以前ブログで書いた通り、現在Webpackerへの移行を機にフロントエンド周りの改善を進めています。 tech.medpeer.co.jp その中でVue.jsとRailsをいい感じに組み合わせるにはどうしたら良いかについて悩むことがあったので、本記事にて共有させていただきます。悩んだ内容としては以下になります。 1. Ajax通信時にCSRFトークンをどう設定すればいいか? 2. 単一ファイルコンポーネントで書くHTMLをもっと

master1223 2019/09/17

vue
rails

リンク

Vue.jsのdataプロパティで配列の変更はspliceで置き換えろ！ - 親バカエンジニアのナレッジ帳

dataプロパティで配列の定義変更する場合はspliceで置き換え削除する場合もsplice 末尾に追加する場合は従来通りpushを使え多次元配列はループなどで同様に変更可能それぞれの配列の2番目（インデックスのキーが1）の値を変更する場合 dataプロパティで配列の定義 ti-tomo-knowledge.hatena blog.com のページで、Vue.jsではdataプロパティの変更がリアクティブに変化すること、また、それを単なる変数ではなくオブジェクトでも実現させるための方法について説明しましたが、このページではdataプロパティで配列を定義した場合にリアクティブに動作させる方法を説明します。オブジェクトに続いて、配列でも変更の仕方に注意が必要になるのです。変更する場合はspliceで置き換えオブジェクトの変更で使用していた$setと同様、配列でもspliceという使

master1223 2019/09/16

vue

リンク

[Vue.js] Vue CLI で作ったプロジェクトで Buefy を使ってモーダルを実現する際にハマったこと - Qiita

本題の前に Buefy とは Buefy は Vue.js 用の UI コンポーネント。公式をみると上記がそのまま書かれている。以下は公式のトップページから拝借したもの。 Lightweight UI components for Vue.js based on Bulma ライセンスは GitHub - buefy から MIT とわかる。 Get Started 公式の Get Started に沿って進めればすぐに利用できる。本題公式の Modal サンプルコード実行時にエラーが発生さて、本題のモーダルについて。 Buefy ではモーダルの実現についても公式ページの Modal にサンプルコードが載っている。で、以下のサンプルコードをそのまま使ってみたら <template> <section> <button class="button is-primary is-me

master1223 2019/09/12

vue
buefy

リンク

中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog

こんにちは。カヤックのSPAおじさんこと島津です。今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク数年前とは事情が変わり、フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向

master1223 2019/09/11

vue
ssr

リンク

Rails 5.2で Webpacker + Vue.jsを使ってSPAを実現 - Qiita

VueCLIでのSPAではなくRails内でVueを一部だけ利用するという方法をご紹介します。 VueJSのGetStartedが終了していてRailsのチュートリアルも終了している人が対象です。概要説明通常のSPAとどう違うのかという所だけ簡単に触れておきます。一般的なSPAはgulpやgruntを使ってHTMLを生成してAJAXでサーバーサイドアプリケーションに連携するのが普通です。デメリットとして下記のようなものがあげられます。 ✗　OAuth認証の場合には処理が複雑 ✗　サーバーサイドレンダリングで利用している共通のデザインなどの使い回しが面倒 ✗　画像やその他リソースのキャッシュ対策が面倒 Railsの一部としてSPAを組み込む場合には上記のデメリットが解消する事とよりセキュアなアプリ開発が実現できます。 ○　OAuthなどの認証機能はRailsのものを流用できる ○　e

master1223 2019/09/03

リンク

Ruby on Rails, Vue.js で始めるモダン WEB アプリケーション入門 - Qiita

はじめにこの記事では Ruby on Rails と Vue.js を使って WEB アプリケーションを作成しながら、必要な技術について説明しています。私自身は Rails を使う機会が多いのですが、Vue.js を勉強する目的で学んだことをまとめたものです。そのため Rails は既に触ったことがあり、Vue.js を初めて使ってみたいという人に向けて入門となる情報です。ここで紹介したコードはGitHubに公開しています。またRuby on Rails, Vue.js によるモダン WEB アプリケーション実践編 (その1)を執筆しているので、興味がありましたら合わせてご覧ください。この記事で作成するアプリケーションについてこの記事では以下の環境で動作することを確認しました。 Ruby on Rails: 5.2.2 (Rails: 6.0.0 でも確認済) Ruby:

master1223 2019/08/30

vue
rails

リンク

Rails環境でJS , CSSをwebpackで完全に管理する - Qiita

追記 Viewファイル内でJSとCSSを読み込んでいたのをテンプレートファイル内で読み込むように変更。リポジトリを用意しました。開発にそのまま使用できます。記事を読んでいちいち設定めんどいなと思ったらこのリポジトリをクローンしてアプリ開発に使ってください。 https://github.com/shan-shan95/rails-vue-template 1/27 追記「webpackに乗り換えることのメリット」の項目を追加しました。ファイル構成、webpackの設定を少し変更しました。この構成にさらにbulma, fontawesome5, normalize.cssを入れる手順です。めんどくさい人は上のリポジトリに入っているのでそのまま使ってください。 https://shanshan.hatenadiary.jp/entry/2019/01/26/152807 なぜ人類は

master1223 2019/08/29

rails
vue

リンク

はてなブックマーク

タグ

関連タグで絞り込む (5)

vueに関するmaster1223のブックマーク (8)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス