vue-cli(v3) + Nuxt.js + ElementUIを触ってみた - Qiita
Nuxt.jsが実際のプロダクトで導入されるケースが増えて来ている為、ElementUIと合わせて触ってみました。また、vue-cliのv3betaが試せるタイミングでしたので、合わせて触ってみました。 TL;DR Nuxt.js + ElementUIのサンプル作成 vue-cliのv3(現時点では3.0.0-beta.6)でのvue init vue addでのelement-uiライブラリ導入 Github：https://github.com/locol23/learn-nuxt-elementui 後述のnowでデプロイしたデモサイト：https://learn-nuxt-elementui-gacofatvgh.now.sh コンテナ停止中の場合は、ページが表示されない為、リロードをお願いします。 対象読者 Nuxt.jsが気になっているが、まだ触っていない ElementUI
VueコンポーネントのState管理を考える - 一休.com Developers Blog
この記事は一休.comアドベントカレンダー2018の3日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 一休.comにVue.jsを導入して、約1年が経ちました。スマートフォン版の予約入力画面から始まり、PCとスマートフォン版のホテルページほか、さまざまなUIコンポーネントがVue.jsで実装されるようになってきています。 また、予約入力画面のような複雑な状態管理を伴う画面の実装のため、Vuexを導入しています。 ここ1年ほどVue.js + Vuexというスタックで開発を行ってきて、アプリケーションの設計について色々と思うところがあったので、今回は現状でどういう構成が最適と考えているか、紹介します。 Vue.jsアプリケーションのState Vueコンポーネントには、親から受け取るpropsと、自分自身で保持するstate(data
ゲッター | Vuex
例えば項目のリストをフィルタリングしたりカウントするときのように、ストアの状態を算出したいときがあります。 computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } もしこの関数を複数のコンポーネントで利用したくなったら、関数をコピーするか、あるいは関数を共用のヘルパーに切り出して複数の場所でインポートする必要があります。しかし、どちらも理想的とはいえません。 Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。
Vuex：mapStateの書き方8パターン+11サンプルコード - Qiita
VuexのmapStateは書き方にバリエーションがある。ここではできるだけ多くのパターンを紹介する。 まず、話を具体的にするために次のようなストアを前提にする。 const profile = { namespaced: true, state: { twitter: "@suin", facebook: null, text: "よろしく〜" } }; const user = { namespaced: true, state: { name: "suin" }, modules: { profile } }; const post = { namespaced: true, state: { title: "VuexのmapStateの書き方", tags: ["JavaScript", "Vue", "Vuex"] } }; const store = new Store({ s
Vuex: mapStateの使い方を理解する - Qiita
=== 追記 === この記事を書いたのはだいぶ前ですが、それ以降Vueを触ることはなく、基本 React + TypeScript で開発しているので、現在の Vue の状況はよくわかりません。 が、Vuexのmapヘルパーはだいぶ型に弱そうとの話を見たため、追記させていただきます。 型は命！ =========== Vuexのドキュメントを読んでいて、mapStateの箇所で少し詰まった。理解すればすごい単純なことなのだが、あまりWEB上にドキュメントもなかったので、残しておく。 サンプルも作ってあります。記事中のコードは見やすさのためにimport文などを削ってあるので、完全なコードはサンプルからご確認ください。Vue CLI3を使って構築したため、vue-loaderを使っています。 まずはcomputedの理解から computedを使うことで、「今までthis.$store.s
Vue.js / Nuxt.js を採用した Web 開発で得た知見 | rakuishi.com
2018 年に入ってからは Vue.js / Nuxt.js を採用した Web サイト開発に携わっています。ログイン機能がある Web サイトで、データは API サーバーを叩いて取得するという構成。最近のフロントエンド開発は、感覚としてはアプリ開発ですね。 Vue.js に加えて Nuxt.js を採用したのは SSR（Server Side Rendering）をしたいという理由に尽きます。SSR することによるメリットは、以下となります： Facebook や Twitter が OGP タグを正しく評価してくれる 検索エンジンがサイトを正しく評価してくれる 副産物として、ログインユーザー情報が描画されて返るため、クライアント側で描画されるまでの空白状態がユーザーに見えない この記事ではそんな Vue.js / Nuxt.js を採用した Web 開発で得た知見を紹介していきます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
