You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
書いている途中投稿です。 Devtool ChromeExtention chromeExtention Vuetify Googleが発表した「デザインのガイドライン」(マテリアルデザイン) に沿ったライブラリ vuetifyjs.com 既存カラーパレットがある Class名で即適応. (特にデザインから関われる場合) 使い方:<v-flex red> </v-flex> link 問題/エラー集 アイコンが表示されない index.htmlに追加 <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> </head>
Vue.jsとVuetifyでマテリアルデザインなWebアプリをつくろうにもスタートダッシュでかなり躓くのでメモ CDNのVue.jsではなく単体の.vueをwebpackでコンパイルする方でやります。 まずは各種モジュールのインストール npm install -g vue-cli vue init webpack-simple my-app cd my-app npm install npm install vue-router vuetify --save 次にindex.htmlを編集 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ui</title> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,50
Vueの公式ドキュメントが強く推奨するVueコンポーネントのファイル名の命名規則。 単一ファイルコンポーネント 単一ファイルコンポーネントのファイル名はPascalCaseかkebab-case。 mycomponent.vue、myComponent.vue MyComponent.vue、my-component.vue ベースコンポーネント 頻繁に使われるベースコンポーネント(ステートを持たないDumpコンポーネントやPureコンポーネントと呼ばれるもの)は、Base、AppまたはVで始めないとならない。 MyComponent.vue VueTable.vue Icon.vue BaseButton.vue AppTable.vue VIcon.vue シングルインスタンスコンポーネント シングルインスタンスコンポーネント(1ページにつき1個しか使われないコンポーネント)は、The
【Vue.js,Firebase】麻雀好きのエンジニアによる麻雀好きのためのサーバレスな麻雀成績管理PWAアプリをリリースした【個人開発】Vue.jsWebサービスFirebase個人開発PWA 今までにない麻雀成績管理アプリをリリースしました! https://t.co/jjpEyVcSHh 麻雀の成績管理アプリローンチしました! 全ての麻雀好きのためになりますように! — kooooohe@旅人 (@kooooohe_) 2018年11月5日 背景 雀荘に行くたびに麻雀の成績をほとんどの人が紙で書いている かくいう私もアプリを数個入れていたが、結局紙に成績をつけてしまっていた... 紙のUI,UXにアプリが勝てていないのか? 元雀荘店員エンジニアとして、最新技術を駆使し、麻雀成績管理Appを作ることが私の責務である 機能要件 PWA 麻雀の得点を記録できる 得点の履歴が見れる 3人の点
【コードの隠し味】あなたのコードは大丈夫??一瞬のUI崩れをVue.js templateタグが解決してくれる。Vue.js 記事タイトルがターゲットニッチすぎて見つけられないことは承知の上、この現象を紹介します。 まずはこちらのサイトの動きを見てください。(1度リロードしています) こちらのページでは、SNSボタン付近が読み込まれる時、ローディング後(今回はリロード後)に、画面が少し下がってからSNSボタンが表示されます。 このような少し不自然なガクッとなる状況を、Vue.jsのtemplateタグを使って、解決しようと思います。 ガクッとなる原因のコードは? まずは、このガクッとなる部分で何が起きているのか見ていきます。 デベロッパーツールで確認してみると、このような構成になっていました。 SNSボタン表示後のスタイルを見ると、周りに画像のような margin がみられます。 これはH
6コンテナが起動して結構仰々しいです。特にDjangoが2コンテナ上がってしまいます。本番用であればdaphneをつかって1コンテナだけで済みますし、開発中のホットリロードを実現するにはrunserverでいいのですがそれぞれ以下の問題があります。 daphne ホットリロードがない HTTP/WSはどちらも対応できる runserver(channels有効済) ホットリロードあり HTTP/WSはどちらも対応できる staticfileの配信がおかしい(できない?) という状況です。そこでHTTPとStaticfileの配信をchannelkanban_serviceで行い、WebSocketだけchannelkanban_websocketで行っています。WebSocketでのアクセスは/ws/をパスに含めるようにしてnginxでリバースプロキシさせました。 Vue.jsでのコンポー
<script> export default { computed: { windowSize: () => { return { x: window.innerWidth, y: window.innerHeight } } } } </script> window is not defined 原因 コンポーネントのライフサイクルが関係しており、適切な場所でwindowを使わなければならない ライフサイクル 解決策 mountedでwindowSizeをセットするように実行 <script> export default { data: () => ({ windowSize: { x: 0, y: 0 } }), mounted () { this.onResize() }, methods: { onResize () { this.windowSize = { x: windo
<v-icon>info</v-icon> <style lang="scss" scoped> // scopedが付いている </style>
ίϯϙʔωϯτϕʔεͷར σβΠϯઢ σβΠϯͷϧʔϧ͕໌֬Խ͠ ଐਓੑʹΑΒͳ͍σβΠϯ͕ՄೳʹͳΔ ΧϥʔελΠϧͳͲʹઆ໌จΛॻ͘ͱ ϧʔϧΛकΓͳ͕ΒσβΠϯ͍͢͠ ࠶ར༻͍ͨ͢͠ΊɺσβΠϯ͕ݮΒͤΔ ݟͨͷʮσβΠϯʯͰͳ͘ɺ ϧʔϧͱͯ͠ͷʮσβΠϯʯΛ ͭ͘Δͱ͍͏ҙ͕ࣝࣗવͱժੜ͑Δ Ұ෦͢ͱͯ͢Δ ίϛϡχέʔγϣϯίετ͕ݮΔ ਖ਼͍͠σβΠϯʹ͍ͭͯͷڞ௨ཧղΛ࣋ͪ ͍͢ શମͷ౷ҰײɺҰ؏ੑΛҡ͍࣋͢͠ ΤϯδχΞઢ ΤϯδχΞͰ͍ܰσβΠϯͰ͖ΔΑ͏ʹͳΓ ͦ͏ XD, Sketchͷ࡞ΓࠐΈ࠷ऴՌʹ ͳΒͳ͍͜ͱ͕ٯઆతͳར scoped cssͰBEMֶशίετ͕աࢿʹͳͬͨ StorybookΛར༻ͯ͠ ݟͨͷ֬ೝ͕Ͱ͖Δ σβΠϯͷஈ֊͔Β࠶ར༻ੑΛߟ͑ͨUIઃܭΛ͢ Δ͜ͱͰɺ CSSͳͲ࣮ͷ߹͕ࣗ
Vue.js 2以降無くなった、 $dispatch と $broadcast に対応するための、 event hub の通知が飛び回ってる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く