TodoAppでVue.js入門(2)

やりたいこと

前回はvue-cliを使用してVue.jsのプロジェクトを作成し、Todoアプリを作成した。今回はtemplateをpug,styleをstylusで簡潔に書く¹と同時にVue.js用のUIフレームワークElementを導入して見た目も良くしたい。

成果物
https://github.com/lucidfrontier45/vue-todo-test/tree/0.2

pugの導入

pugとpug-loaderをインストールする。

$ yarn add -D pug pug-loader

後はwebpackやvue-loaderがよろしくやってくれるので何も設定は必要ない。らくちん！
.vueファイル内でtemplateタグでlang="pug"と指定するとpugで書ける。

例

<template lang="pug">
  div
    img(src="../assets/logo.png")
    h2
      router-link(to="/todos") Watch Todos
</template>

筆者はPythonistaなのでインデントで構造を管理するのが大好きです。

stylusの導入

こちらも必要なパッケージをインストールするだけで設定はいらない。(すでにwebpackのconfにstylus関連は書いてある)

$ yarn add -D stylus stylus-loader

styleタグ内でlang="stylus"を指定すればOK。

<style lang="stylus">
# app
  font-family: 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  color: #2c3e50
  
  .app-main
    margin-top 60px
</style>

Elementの導入

ElementはBootstrapやSemantic UIなどのいわゆるUIフレームワークで、ボダンなどの様々なパーツを提供している。Elementがたと違うのはVue.js前提の設計になっている点である。

例えばヘッダーメニューを作るel-menuはvue-routerと連携できるのでこのように簡単にページ上部にメニューヘッダーを作れる。

<template lang="pug">
  #app
    .app-header
      el-menu(:default-active="$route.fullPath" @select="handleSelect" mode="horizontal" router)
        el-menu-item(index="/") Top
        el-menu-item(index="/todos") Todos
    .app-main
      router-view
</template>

Todo画面ではinput,button,selectなどを使用した。

<template lang="pug">
  el-card.box-card.todo-app
    div(slot="header" class="clearfix")
      el-input.todo-input(type="text" v-model="input" placeholder="what to do?")
      el-button(@click="handleAdd" type="primary") Add
      br
      span Filter
      el-select(v-model="mode")
        el-option(label="All" value="all")
        el-option(label="Completed" value="completed")
        el-option(label="Incomplete" value="incomplete")

    ul
      li(v-for="todo in filteredTodos" :key="todo.id")
        el-button.toggle-btn(v-if="todo.completed" @click="() => handleToggle(todo.id)") restore
        el-button.toggle-btn(v-else type="success" icon="check" @click="() => handleToggle(todo.id)") done
        | {{todo.msg}}
</template>

その他に今回は使用していないが、テーブルの作り方が独特で面白い。dataというattrに実際に表示させたいデータの配列をbindするという方法だ。

<template>
  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Address">
    </el-table-column>
  </el-table>
</template>

詳しくは公式docを参照のこと。

小並感

Elementとpugを組み合わせるといい感じにページを簡単かつ簡潔に書けました。
次回はvuexを導入します。

1. CSSなどのスタイルシートを使用したデザインはほぼ素人なので書き方自体はめちゃくちゃかもしれませんが。。。 ↩