ユーザ用ツール

サイト用ツール


z_blog:2018:181127_vue_firebase_save

181127 Vue.jsでfirebaseにデータを保存

開発環境

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

Editor.vueでMarkdown書式をプレビュー表示

src/components/Editor.vue

(変更前)

(変更後)

試しに書いてみる。

参考:https://qiita.com/tbpgr/items/989c6badefff69377da7

メモを複数作成可能にする

  1. メモを保存する変数を配列に変更(複数保存できるように)
  2. メモ一覧を表示するview
  3. メモ一覧のタイトルは、メモの1行目とする
  4. 配列へメモを追加する
  5. メモ一覧から特定のメモを選択して、切り替える(選択しているメモの色を変えて分かるようにする)

(変更後1:templateとscriptのみ)

(変更後2:styleも変更)

作成中 

今回写経した本

リンク

z_blog/2018/181127_vue_firebase_save.txt · 最終更新: 2018/11/30 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki