Note

# Memo(VuePress)

# コマンド(2019-01-26)

開発時のコマンドは, $ yarn docs:dev

このコマンドは, package.jsonで設定可能。

# レイアウトおよびmarkdown

/.vuepress/theme/Layout.vueで設定可能。

# Markdown Slot

:::でスロットを作れるらしいが, 上手くいかない。
あとでまたやる。
https://vuepress.vuejs.org/guide/markdown-slot.html#why-do-i-need-markdown-slot

# Vueやりますか

# 要件

$ node -v
v8.12.0

$ npm -v  
6.4.1

// インストール
$ npm install -g vue-cli

$ vue --version
2.9.6

# ポート指定

  • ポート指定はconfig/index.jsで設定可能
  • ポートの許可は
    • Vagrantfileのforwarding_port
    • /etc/sysconfig/iptablesで許可する
    • ホスト側のセキュリティソフト等も確認する

# componentsフォルダ内の*.vueファイルでしていること

  • <template>にhtml構造の記述
  • <script>にjsを記述(htmlに書かれているmsgもここで定義)
  • <style>にcssを記述

以上の3点をまとめて, *.vueに記述。

# checkboxの追加(2019-01-27)

以下のpackageで追加可能.
ただし, staticなので注意.
markdown-it-task-lists (opens new window)

# Computedとmethods, watchの違い(2019-01-30)

Property Name Speed Details
Computed 高速 値は依存関係に基づきキャッシュされ, 依存元が変更されない限りはメモ化された値を返す
methods 普通 依存元が刻々と変化する場合に用いられる
watch 速い データが変わるのに応じて非同期やコストの高い処理を実行したいときに, ウォッチャとして扱うのに向いている

# リンクをBase依存にする

$withBaseを使えば良い.
e.g.)

<img :src="withBase('/foo.png')" alt="foo">

# sass対応する(2/7)

$ npm install sass-resources-loader --save-devでインストールできる

# 1.x系にしたときのtheme

  • themeは, src/.vuepress/theme/stylesにある
  • index.stylではなく直接編集した方が楽

# 参考資料

Last Updated: 9ヶ月前