サルでもわかるWEBプログラミング

Vue.jsの入門のために、以下の本を写経しているが、面白い！Vue.jsってどんな感じなのかな？とか、WEBアプリを作ってみたいと願う初心者の方に、本当におすすめです。

今回は、CodeSandbox上で写経していきたいと思います。

CodeSandboxは、無料のオンラインWEBアプリケーション開発環境です。2017年にサービスが開始され、2018年12月現在、React.js、Angular、Vue.jsなどのJavascriptフレームワークを用いたプログラミングを、登録無しに瞬時に行うことができます。nowというサイトの連携で、無料で公開することもできます。
　

z_blog:2018:181216_nuxt_firebase

Windows 8.1 Pro(MacでもOK)
Chrome
GitHubアカウント作成済み（なくても大丈夫ですが、コードを保存して後で参照しやすいです）

WEBブラウザのChromeをインストールして、Chrome上で、CodeSandboxを利用していくのがよいと思います。

https://codesandbox.io/

https://codesandbox.io/　で、右上の Create Sandbox をクリック

Vue をクリック。これでVue.jsの開発環境が整います。

今回は、保存したものを後で呼び出しやすいように、GitHubアカウントでログインします。

途中でCtrl+Sを押せば、保存されます。後で、Dashboardで保存した途中から開始することができます。

画面一番左の上から2番目のアイコンをクリック

Vue Templateの右側の鉛筆ボタンをクリックして、好きな題名に変更します。

今回は、MyMarkdown2 としました。

データをインターネット上で見られるようにするために、Firebaseを利用します。Googleアカウントは作成済みとします。

https://console.firebase.google.com/

から、プロジェクとの追加　で、プロジェクト名を、例えば、mymarkdownで新規作成します。

アプリ作成後の画面で、３つあるアイコンの一番右のアイコンをクリックして出てくる、「ウェブアプリにFirebaseを追加」のコードをコピーして、Vue.jsファイル群のindex.html内の</body>の直前に、以下のようにペーストする。

Firebaseの画面

Vue.jsプロジェクトの画面(index.html)

(変更前)

(変更後)

通常の開発環境では、ターミナル画面で、npm install firebase –saveと打ち込みますが、CodeSandboxでは、以下のように行います。

Dependencies　をクリック

Add Dependency をクリック

Search or …のところに、firebaseと入力して

firebaseのnpmをインストール

これで、Dependenciesのところに、firebaseが追加されました。

コンポーネントの作成

src/commponents/Home.vueと、Editor.vueを以下のように作成。

src/App.vue　の編集

(変更前)

(変更後)

Firebaseの管理画面でAuthenticationタブを開き、「ログイン方法」で、GoogleのステータスをONにする。

Googleログインの実装

Home.vueを編集

(変更前)

https://codesandbox.io/s/n1rq0x72ll
vue-firebase demo

https://codesandbox.io/s/github/jackabox/vue-firebase-auth
vue-firebase-auth

https://gist.github.com/mickaelandrieu/a66bdf031a3c5fa4caf301504f018904
Vue + Firebase + Auth Demo

Vue.js初めての方にお勧めです。