vue.jsのUIライブラリComponentをPugから利用する

webpackを使わず途中から組み込んでいくことを想定




Componentとは


vue.js 依存のUIライブラリ
テーブル、カラーピッカー、カレンダー、ページング、ローディング、メッセージボックス、タブ、カルーセル などを簡単に表示できる。
http://element.eleme.io/#/en-US/component

導入方法がwebpackを使用した例しか見当たらないがどうにかして自前のプロジェクトに導入したい。




環境


以下環境のWebプロジェクトへ導入する
エディタ:VSCode
言語:TypeScript
テンプレートエンジン:Pug
サーバ側はNode.js(TypeScript) * Express になっている(今回はあまり関係ないけど一応)




vue componet tableをシンプルに表示する


以下のサンプルを例に考えてみる。
http://element.eleme.io/#/en-US/component/table#single-select
jsfiddleだけで表示しているのでwebpackを使用せずともsimpleな構成でいけるはず

以下のようにする。

test.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>
<body>
<div id="app">
<template>
  <el-table :data="tableData" border :default-sort="{prop: 'date', order: 'descending'}" style="width: 100%">
    <el-table-column prop="date" label="Date" sortable width="180">
    </el-table-column>
    <el-table-column prop="name" label="Name" width="180">
    </el-table-column>
    <el-table-column prop="address" label="Address" :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
</div>
</body>
</html>

test.js
window.addEventListener( 'load', function() {
    var Main = {
        data() {
          return {
            tableData: [{
              date: '2016-05-03',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles'
            }, {
              date: '2016-05-02',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles'
            }, {
              date: '2016-05-04',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles'
            }, {
              date: '2016-05-01',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles'
            }]
          }
        },
        methods: {
          formatter(row, column) {
            return row.address;
          }
        }
      }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
})


上記2ファイルを同階層に配置してtest.htmlをブラウザで表示するとサンプルと同じようになるはず




実プロジェクトにcomponentを組み込む


上記htmlをpugに変更してプロジェクトに組み込む
http://html2pug.com/ を利用するとサクッといける

doctype html
html
  head
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(charset='UTF-8')
    meta( name="viewport", content="width=device-width, initial-scale=1")
 script(src="https://unpkg.com/vue/dist/vue.js")
 script(src="https://unpkg.com/element-ui/lib/index.js")
 script(async src="javascripts/test.js")
 link( rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-default/index.css")
  body
  div#app
    template
      el-table(:data='tableData', border='', :default-sort="{prop: 'date', order: 'descending'}", style='width: 100%')
        el-table-column( prop="date" label="Date" sortable width="180")
        el-table-column( prop="name" label="Name" width="180")
        el-table-column(prop='address', label='Address', :formatter='formatter')

コロンのところで少し手間取ったが意外といける 


ついでにスクリプトをTypescriptへ変更(ほとんど変わってないけど)
declare var Vue: any
window.addEventListener("load", (e) => {

  const Main = {
    data() {
      return {
        tableData: [{
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        }, {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        }, {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        }, {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        }],
      }
    },
    methods: {
      formatter(row, column) {
        return row.address
      },
    },
  }

  const Ctor = Vue.extend(Main)
  new Ctor().$mount("#app")
})

これでOK
以下のように表示される

component table


実は普通にwebpack使ったほうが良かったりして


2017年5月10日水曜日

0 件のコメント:

コメントを投稿