サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
cr-vue.mio3io.com
# Netlifyへの自動デプロイをしよう このチュートリアルでは、Vue CLI で作成したVue.jsのプロジェクトを、Netlify で手動デプロイおよび自動デプロイするまでの手順を説明します。 # Netlify とは? 静的サイト向けの高機能なホスティングサービスです。 Git のホスティングサービスと連携した自動デプロイ、SSL/HTTPS を無料で利用できます。 英語のサイトですが、直感的な作りになっているため Google 翻訳などを利用すれば問題なく使用できるでしょう。 特に、ポートフォリオなどの静的サイトには最適です。 ここでは、GitHub アカウントを使った登録方法を説明します。 ちなみに、このサイトも Netlify(+VuePress) を使って公開されています! # Netlify の登録 netlify トップページ netlify Signup ページ 「
# チュートリアルについて # このチュートリアルについて このチュートリアルは「書籍に掲載しきれなかった分を、もったいないのでウェブ公開しよう…」と思って掲載したものです。 # プロダクトを紹介しよう! Vue.js の Slack チームには、自分で作成したものを紹介するための「i-made-this」というチャンネルが用意されています。 Vue.js を使って完成させたウェブサイトやアプリケーションは、このチャンネルで他の方々に紹介してみましょう!
ローカルストレージを使っているため、保存したデータを他の端末から見ることはできません。 # ファイルを準備しよう 使用するファイルは「index.html」「main.js」「main.css」の3つのファイルと、CDN からスタンドアロン版の Vue.js ファイルを読み込みます。 # こちらは完成形 index.html main.js main.css CSS の説明はしていないため、コピペして使用してください。 ページレイアウトは次のとおりです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="app"> <!-- 絞り込みラジオボタン --> <
# コードと動作デモについて このページでは「基礎から学ぶ Vue.js」の解説で使用している、サンプルコードと動作デモの一部を公開しています。 主に、長めのコードのコピペ&動作デモの確認用ページのため、コードの内容や機能についての解説はしていません。 書籍と合わせて読んでいただけたら嬉しいです 🐹 コードを探したい場合は、ヘッダーの検索フォームに見出しの名前を入力すると見つけやすいです。 掲載してない場合もあります 😢 # 学習のポイント 本書は、読み書きしながら最終的に何かが完成する、といったチュートリアルの内容ではありません。 基本的に各セクションのコードは、機能を説明するための断片的なコードになっています。 単純にコードを書き写したり、動作を確認するだけではなく「別にエラーになっても構わない!」という気持ちで、プロパティやメソッドを追加したり、テンプレートを自由に書き換えてみま
# 使用している主な機能 フォーム入力バインディング v-model 105ページ コンポーネント 146ページ スロット 169ページ トランジション 194ページ # ソースコード ソースコード <template> <transition name="modal" appear> <div class="modal modal-overlay" @click.self="$emit('close')"> <div class="modal-window"> <div class="modal-content"> <slot/> </div> <footer class="modal-footer"> <slot name="footer"> <button @click="$emit('close')">Close</button> </slot> </footer> </div>
# 認証付きの簡易チャットを作る! このチュートリアルでは、SNS 認証と Firebase を使って、認証付きの簡単なチャットアプリケーションを作成する手順を紹介します。 Vue.js 以外に次のサービスを利用します。 Firebase ユーザー管理と、リアルタイムデータベースを利用します Twitter アプリケーション認証を利用します Google アカウントおよび Twitter アカウントは、すでに取得していることを前提とします。 また、Twitter アプリケーションを作成するためには、使用する Twitter アカウントで電話番号を登録している必要があります。 # Firebase とは? Google が運営するソーシャルログインや、リアルタイムデータベースの機能を提供するサービスです。 認証やデータ管理のためのバックエンドシステムを用意する必要がなくなり、フロントエンドの
どんな本? 機能ごとに解説している Vue.js 入門書です。これからはじめる方にも、すでに Vue.js をお使いの方にも、楽しんでいただける内容になっています。 しっかり学習できる! Vue.js は直感的に使える機能が多く、雰囲気で使ってしまいがちです。どんなメリット&デメリットがあるかも解説しているため、しっかりと学習できます。 「Vue.js が楽しい!」ウェブフロントエンド界隈でこの言葉を耳にすることが増えました。 フロントエンドを取り巻く技術の進化によって、フロントエンドの役割は増え、フレームワークもより身近なものになっています。 この本では「Vue.js ってなに?」「フレームワークってなに?」という基礎概念と導入からプロダクトに役立つ情報までを体系的に解説しています。 これから JavaScript のフレームワークを始める方にはもちろん、すでに Vue.js をお使いの
このページを最初にブックマークしてみませんか?
『基礎から学ぶ Vue.js』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く