あまり頭を使わずVue + Vuetify + TypeScriptの初期描画を高速化するためにやったこと - Qiita
やりたいこと Vue + Vuetify + TypeScriptで書かれたWebアプリをはじめて開いたときの描画を高速化したいです。初期描画が早いと第一印象が良く速いほどと嬉しいです。ロジック部分を高速化できそうなアルゴリズム書き換えたりせず、なるべく単純作業だけで高速化できそうなことをまとめます。 具体的には「マルチデバイス間でファイル転送を手軽にしたい！スマホでもPCでもcurlでも - Qiita」のWebアプリを高速化します。もともと、デスクトップ環境だとそれほど初期描画の速度は気にならないのでモバイルでの初期描画の比較を以下に載せます。 高速化の前と後での比較 最終的にどれぐらいの差が出たかの比較動画です。 左が高速化前で、右が高速化後です。 画質が良い動画: https://youtu.be/I9VTpnpB6OM 体感でも描画までにかかる速度の時間がわかります。 iOS (
VuetifyでCRUDを作る手順【Laravel6とNuxt.jsで作る管理画面】 - Deha magazine
PHPの人気のフレームワークLaravelではWebサイトの管理画面を開発することができます。 このシリーズではそんな管理画面の構築に関して、技術者向けにその手順を紹介しています。 この記事ではVuetifyを利用してCRUDを作る方法をご紹介！ Nuxt.jsからLaravelのAPIをAjaxで通信できるようにする手順はこちらの記事で解説。CookieによるAPI経由のユーザー認証機能を作る方法はこちらの記事で解説しています。 ・Laravelを使って構築をしたい方 ・Webサイト構築の具体的な手法が知りたい方 これらに当てはまる方におすすめの記事となっています。このシリーズを読めばLaravel6とNuxt.jsで管理画面を作成することができますよ。 Vuetifyを使う理由VuetifyはマテリアルデザインベースのVueのUIコンポーネントライブラリです。 Vueを使って画面を作り
【vue.js】Vuefityをマスターする(1) | アールエフェクト
VuetifyはVue.jsのUI(ユーザインタフェース)のライブありでVuetifyを利用することでデザインの知識がなくても効率的に美しいGUI画面を作成することができます。しかし使いこなすためにはプログラミングの知識が必要となるためVuetifyの基本的な使用方法を理解しておく必要があります。 本文書ではVuetifyがマスターできるように実践的なダッシュボードの作成を通して使用方法を確認していきます。 説明は2回に分けて行い、1回目である本文書ではダッシュボードのレイアウトの作成方法とルーティングの設定方法を確認します。本文書を読み終えるとVuetifyを利用して自分の力で下記のダッシュボード画面を作成することができます。 ダッシュボード画面 2回目ではダッシュボードに表示させるグラフコンポーネントを使って、Grid System(グリッドシステム)やResponsive Desig
作成済みのVueプロジェクトでVuetifyを使えるようにする
Vuetify.js is a reusable semantic component framework for Vue.js. It aims to provide clean, semantic and reusable components. 手順 npmでvuetifyをインストールします。 npm install vuetify --save main.jsにimportとプラグインの設定を追加します。 import Vuetify from 'vuetify' import "vuetify/dist/vuetify.min.css"; Vue.use(Vuetify) vuetifyを適用したい範囲を <v-app> タグで囲みます。 アプリ全体に対して適用したい場合は、App.vueを下記のように書き換えます。 <template> <v-app> <div id="ap
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
