====== 181127 Vue.jsでfirebaseにデータを保存 ======
[[z_blog:2018:181126_vue_google_login|181126 Googleアカウントでユーザ登録とログイン状態の判別]]に続いて、以下の本の写経をしていく。
[[https://amzn.to/2SeJXxX|改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
===== 開発環境 =====
Windows 8.1 Pro
Node v8.12.0
vue-cli 2.9.6
firebase-tools 6.1.1
VisualStudioCode
なお、今回は、C:/vue/ フォルダに、mymarkdown2というVue.jsプロジェクトを作成している。
コマンドプロンプト（ターミナル）で、npm run devとすることにより、サーバを起動した状態とする。
===== メモを編集できるMarkdownエディターを作る =====
==== markedというnpmモジュールのインストール ====
Markdownをブラウザ上でプレビューするためのライブラリであるmarkedを --save-dev でインストールする。
npm install --save-dev marked
{{:z_blog:2018:pasted:20181127-215406.png}}
==== Editor.vueでMarkdown書式をプレビュー表示 ====
src/components/Editor.vue
(変更前)
{{:z_blog:2018:pasted:20181127-215605.png}}
(変更後)
{{:z_blog:2018:pasted:20181130-171052.png}}
試しに書いてみる。
{{:z_blog:2018:pasted:20181130-171822.png}}
参考：https://qiita.com/tbpgr/items/989c6badefff69377da7
{{:z_blog:2018:pasted:20181130-171847.png}}
==== メモを複数作成可能にする ====
-メモを保存する変数を配列に変更（複数保存できるように）
-メモ一覧を表示するview
-メモ一覧のタイトルは、メモの1行目とする
-配列へメモを追加する
-メモ一覧から特定のメモを選択して、切り替える（選択しているメモの色を変えて分かるようにする）
(変更後１：templateとscriptのみ)
{{:z_blog:2018:pasted:20181201-002011.png}}
(変更後２：styleも変更)
{{:z_blog:2018:pasted:20181201-005102.png}}
作成中
===== 今回写経した本 =====
[[https://amzn.to/2SeJXxX|改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
===== リンク =====
目次：[[vue:index.html|Vue.js]]
前：[[z_blog:2018:181126_vue_google_login|181126 Googleアカウントでユーザ登録とログイン状態の判別]]
後：