[B! Vue.js] hirooka_digitalplのブックマーク

hirooka_digitalpl id:hirooka_digitalpl

Vue.jsに関するhirooka_digitalplのブックマーク (12)

SPAだけじゃない！Vue.js[1]　jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。以前は最先端感をプンプンさせていたSPA（シングルページアプリケーション）ですが、最近では事例や情報が増え、当たり前に選択される技術となってきたように感じます。今後もどんどん使われていくのでしょう。ですが、だからといってサーバーサイドテンプレート（Haml、Slim、テンプレートとしてのPHPなど）やHTMLファイルへのマークアップが無くなるわけではありません。SEO対策、CMSやフレームワークへの適応など、様々な理由でまだまだ使われていくはずです。ではSPAと、サーバーサイドテンプレートやHTMLファイルへのマークアップと、両方に使えるフレームワークはないものだろうか？そう思い調べてみたところ、Vue.js がまさにそれでした。案件でも実際に使用し、大きなメリットを感じられたため、記事にまとめておこうと思います。 Vue.jsのSPAでの用
hirooka_digitalpl 2020/06/09
Vue.js
リンク
Twitter 認証と JWT でログイン機能を実装した話 - atuweb 開発ブログ
Atuweb が開発した SPA サイトにログイン機能追加を行いました。 Overview Laravel と Vue.js で実装したサイトに Twitter 連携を実装し、Twitter のプロフィールをユーザ情報として利用する大雑把な処理の流れは次です。フロントから Twitter の認証へ飛ばし、認証結果によって JWT トークンを発行サーバからフロントエンドにトークンを引き渡しフロントエンドからのリクエストにトークンを付加し、バックエンドで認証を行う環境 PHP 7.0 Laravel 5.4 Vue.js 2.2.x npm 4.5.x Twitter連携技術書サイトでは、thujohn/twitterを利用しております。処理フローは次の通りです。技術書サイトより Twitter 側の認証画面にリダイレクト Twitter上で ID/Password を入力する
hirooka_digitalpl 2018/10/04
laravel

Vue.js
リンク
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4 - Qiita
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4JavaScript LaravelJWTSPAVue.js Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA なTODOアプリを作ってみました。結構本気で作りました。 Laravel + Vue.js はかなり作りやすく、サーバーサイドの処理が少ない＆分かりやすいので楽しかったです。自分の記憶の定着を上げるため、チュートリアルを書きます。 JS初心者なので、おかしいところとかベストじゃないところが多々あると思いますのでご指摘頂けたら嬉しいです！作ったものソースコードデモサイト目次四部作です。はじめに ← 今ここ基本的な概念の説明インストール Todoアプリ作成編 / サーバーサイド M
hirooka_digitalpl 2018/10/04
laravel

Vue.js
リンク
Laravel × Vue.js × axiosでTODOリストを作るよ！その1 | とんよー。ブログ
はい。とてつもなくシンプルですね（笑）。タスクを識別するためのキー「id」。主キーで、オートインクリメント。タスク名を入れる「title」。 ………以上！！ …あ。バリデーションは面倒なのでナシで（汗）…。開発環境について本記事は下記の環境を想定して書いています。お使いのPCの環境と異なる場合は、適宜調整してくださいませ。 macOS High Sierra ver.10.13.5 Composer – 1.6.5 npm – 5.6.0 Laravel – 5.5 Vue.js – 2.1.10 axios – 0.16.2 laravel-mix – 1.0 Laravel・Vue.js・axiosでTODOリストを構築する手順変更があるかもしれませんが、流れとしてはだいたい下記のようなカタチになるかと。 Laravelのインストール・セットアップ Vue.jsとaxios
hirooka_digitalpl 2018/10/04
laravel

Vue.js
リンク
laravel Vue.js で最初にやる設定 - Qiita
'connections' => [ 'sqlite' => [ 'driver' => 'sqlite', 'database' => env('DB_DATABASE', database_path('database.sqlite')), 'prefix' => '', ], 'mysql' => [ 'driver' => 'mysql', 'host' => env('DB_HOST', '127.0.0.1'), 'port' => env('DB_PORT', '3306'), 'database' => env('DB_DATABASE', 'forge'), 'username' => env('DB_USERNAME', 'forge'), 'password' => env('DB_PASSWORD', ''), 'unix_socket' => env('DB_SO
hirooka_digitalpl 2018/10/04
laravel

Vue.js
リンク
第一回 Vue.jsでWebアプリをつくろう！ | MONSTER DIVE
近頃、Vue.jsのトリコになって抜け出せずにいるOhkiです。 Vue.jsとは表示部分の view層に焦点を当てたフレームワークです。記述が簡単なので、同じ様なフレームワークである、ReactやAngularに比べて学習コストが低いのが良い所です。基本的な使い方は公式サイトの日本語ドキュメントが豊富で困ることはないと思います。ただ、Vue.jsについて検索すると初心者向けの記事はたくさん見つかるのですが、具体的なアプリの作り方はあまり無かったので、ご紹介したいと思います。一回目ということで簡単に作れる時計アプリを一緒につくりましょう！開発環境構築 Vue.jsには vue-cli という開発環境を簡単に構築出来るものが用意されています。 Node.jsを使用するのでインストールしていない方はインストールしてください。 nodist（Windows）、nodebrew（M
hirooka_digitalpl 2018/10/04
Vue.js
リンク
Laravel 5.4 + Vue 2.1 でSPAアプリケーション作成チュートリアル - Qiita
何となく Laravel ＋ Vue.js の使い方が分かってきた。自分の頭の整理を兼ねて、書き残しておく。 ※ 追記 2019/02/26 現在では Laravel も Vue も若干古いバージョンですが、基本的な考え方は同じなので、参考になれば幸いです。処理の流れブラウザ → Laravel: SPAのViewをリクエスト（初回のみ）ブラウザ: Vue を初期化、View （仮想DOM）を描画 Vue → Laravel: XHRでデータをリクエスト Vue → ブラウザ: クライアントサイドでのルーティング Laravel の役割 Webサーバー。起点となるSPAのViewを初回だけ返す。 APIサーバー。サーバーサイドでデータを処理し、JSONを返す。 Vue の役割 Viewの描画。変数のバインド、繰り返し、イベント検知など。 Router。 vue-router を使
hirooka_digitalpl 2018/10/04
laravel

Vue.js
リンク
[Laravel5.5] SPAを構成するためにVue.jsをインストールして動かしてみる - Qiita
はじめに SPA、いいですよね。モダンな感じで。調べてみたらなんとLaravelでもVue.js使ってSPA構築できるみたいじゃないですか！というわけで早速導入するためのマニュアルを。自分用です。そもそも... Laravelには強力なbladeというビューファイルが存在します。しかしながらモダンなWebサービスを構築しようと思った場合、jsなしには語れないみたいなところ、あります。 jQuery？知らない子ですね...。もちろんbladeファイルの中でjsライブラリをコールして使う、みたいな構成でも全然いいのですが、例えばElectron噛ませてスマホネイティブにしようとしたところで大きな壁にぶち当たるような気がしました。更に言えば構築していく上で、どうしてもbladeファイルをパーシャル化（と個人的には呼んでいます、要するに部品化して一つのテンプレートファイルから@incl
hirooka_digitalpl 2018/10/04
laravel

Vue.js
リンク
Laradockを使った開発環境でVueを動かすまで - Qiita
目的 Laradockを使った開発環境で、Vueを動かすまでを解説します。 LaravelでRestAPIを作り、Vueでビューを実装する前提です。 npmを使うので、Docker上でnodejsやnpmインストールをするところから解説します！免責 2017年12月18日現在 Laravel-mix(webpack)が生成するapp.jsの更新前ファイルがうまく消えずに、エラーとなります。結果的に、"npm run watch"が使えません…（かなり悲しい）無理矢理な方法で"npm run dev"は実行可能です。解決次第、記事を更新します。 Laradock(Dockerイメージ群)のインストールこちらを参照してください。手順 nodejsインストール npmインストール welcome.blade.phpを変更 ExampleComponent.vueを変更 npm run
hirooka_digitalpl 2018/10/03
laravel

Vue.js
リンク
2017初頭Vue.js習得用ページまとめ | xxv
年明けからVue.jsを結構触ってます。参考になったなとか、このへん読んどくといいなと思ったリンクなど紹介していきます。でもとりあえずVue.jsの公式のドキュメント(https://jp.vuejs.org/v2/guide/)を一通り眺めたほうがいいです。公式のドキュメントは文量もそんなにないので、手を動かす前にパラパラと流し読みしてしまいましょう。では読み終わった人向けに、紹介を続けます。 Vue.js概要？ http://qiita.com/asip2k25/it ems/bd4bdccd5201d542953c 他のフレームワークとの比較と、Vue.jsの志向しているものを解説しています。文量は結構ありますが、Vue.jsを無駄なく使っていくためには良いガイドですので、ぜひ一読してください。 Vue2のディレクトリ構成を考える http://qiita.com/kurosa
hirooka_digitalpl 2017/11/08
Vue.js
リンク
Laravel 5.4で Vue.js開発環境を手軽に作る
こんにちは。宇都宮です。最近はアシアル社内でもLaravelを使うことが増えてきました。また、フロントエンドも、ReactやVue.jsを使ったプロジェクトをちらほら見かけるようになってきました。今回は、Laravelのインストール方法と、フロントエンド開発環境のセットアップ、簡単なVueコンポーネントの作り方を解説します。 Laravelとフロントエンド Laravelでは、5.3から、Vue.jsが標準のJavaScriptフレームワークになりました。さらに、5.4では、フロントエンドのビルドツールが、gulpベースのElixirから、WebpackベースのMixに変わりました。 Laravelをインストールすれば、Web APIはLaravelで作って、SPA(Single Page Application)をVue.jsで組む、といったことが簡単にできるようになっています。
hirooka_digitalpl 2017/11/08
laravel

Vue.js
リンク
【動画付き】Rails 5.1で作るVue.jsアプリケーション～Herokuデプロイからシステムテストまで～ - Qiita
はじめに Rails 5.1ではJavaScript/index.html.erb周りのサポートが大きく改善されました。これにより、Vue.jsやReactといったモダンなJSフレームワークをRails内で非常に扱いやすくなっています。僕も実際に試してみましたが、本当にびっくりするぐらい簡単にVue.jsやReactを動かすことができました。そこでこの記事ではRails 5.1とVue.jsを組み合わせたサンプルアプリケーションの作成方法をチュートリアル形式で、できるだけ詳しく説明します。また、ローカルで動かしておしまい、ではなく、Herokuにデプロイしたり、テストコードを書いたりするところまでカバーします。この記事自体は長いですが、実際に手を動かすと（スムーズに進んだ場合）30分以内で終わらせることができるはずです！今回作成するサンプルアプリケーション今回は以下のリンク先
hirooka_digitalpl 2017/02/27
Ruby

Vue.js

Ruby On Rails5
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

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

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx