vue-playを触ってみた
vue-playとはVue.jsのコンポーネントを単体で実行できる環境を提供してくれるツールみたいです。
githubのREADMEを見ながら触って見ました。
※サンプルコードのなかにはES2015の文法を使用している部分があります。
環境構築
getplayをグローバルにインストールします。
yarn global add getplay
任意のディレクトリを作成し、getplay
を実行し初期化します。
mkdir vue-play-test && cd vue-play-test
getplay
playディレクトリとplay.config.jsが生成されます。
port番号などを変更したい場合はplay.config.jsから設定できます。
実行してみる
yarn play
yarn play
変更を検知してhot-reloadしてくれるので毎回実行する必要はありません。
コンポーネントの追加
コンポーネント作成
簡単なコンポーネントを作成します。
<template>
<button @click="onClick">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'TestButton',
methods: {
onClick() {
this.$log('hoge')
}
}
}
</script>
$log関数を利用すると画面のコンソール欄に出力されます。
play/index.jsの編集
play関数を利用して追加します。
play関数の引数にコンポーネントを指定することでadd関数の中でコンポーネントとして利用できるようになるみたいです。
add関数を複数つなげて,それぞれでpropsの値を変えたりなど様々なパターンで実行できるみたいです。
import { play } from 'vue-play'
import TestButton from '../src/components/TestButton.vue'
play(TestButton)
.add('with text', '<test-button>hoge</test-button>')
他にもrender関数を利用する方法やtemplateで指定することができます。
第二引数に関数を指定するとrender関数として実行してくれます。
play(TestButton)
.add('with text', '<test-button>test</test-button>')
.add('with template', {
template: '<test-button>template</test-button>'
})
.add('with render', h => h(TestButton, ['render']))
*.play.jsで追加
コンポーネントが増えてくるとplay/index.jsのコード量が多くなり可読性が下がってしまうと思います。
.play.js
という拡張子のファイルを作成することでファイルを分割することができます。
play/index.jsに以下のコードを追加
const load = requireContext => requireContext.keys().map(requireContext)
// require.contextの第一引数にどのディレクトからloadするかを記述します
load(require.context('../src/components', true, /.play.js$/))
指定したディレクトリに.play.jsファイルを作成します。
play/index.jsと同じように書いていきます
import TestButton from './TestButton.vue'
import { play } from 'vue-play'
play(TestButton)
.add('with text', '<test-button>test</test-button>')
.add('with template', {
template: '<test-button>template</test-button>'
})
.add('with render', h => h(TestButton, ['render']))
コンポーネントにpropsを渡す
コンポーネントへのpropsの渡し方は以下の様にdataを用意しtemplate内で指定してします。
.add('with template', {
data() {
return {
text: 'props text'
}
},
template: '<test-button :text="text">template</test-button>'
})
コンポーネントの説明を追加する
説明文やサンプルコードを載せることができます。
READMEの追加
add関数の中でreadmeにHTML文字列を入れてあげます。
play(TestButton)
.add('with template', {
readme: '<h1>TestButtonの使い方</h1>'
})
markdownファイルを読み込んでreadmeに指定する
readmeにmdファイルを使いたいと思い少し試してみました。
まず初めにhtml-loader
とmarkdown-loader
をnpmでインストールします。
npm i html-loader markdown-loader --save-dev
次にmdファイルを読み込めるようにwebpackの設定を編集します。
play.config.js
にwebpack関数を追加することでconfigをいじることができます。
const webpack = require('webpack')
module.exports = {
//...
webpack(config) {
config.module.rules.push({
test: /\.md$/,
use: [
{
loader: "html-loader"
},
{
loader: "markdown-loader",
}
]
})
return config
}
}
.play.jsファイルでmdファイルを読み込みreadmeに入れてあげます。
import TestButton from './TestButton.vue'
import { play } from 'vue-play'
import readme from './TestButton.md'
play(TestButton)
.add('with template', {
template: '<test-button>template</test-button>',
readme
})
Exampleの追加
add関数の中でexampleにサンプルコードを入れてあげます。
play(TestButton)
.add('with template', {
example: '<test-button :text="text">template</test-button>'
})
最後に
いつもVue.jsでコンポーネントを作っている時にどこでデバッグしようかと悩んでいたのでvue-playのようなツールが出て来てくれて嬉しいです。
またどんなコンポーネントなのかを触りながら確かめられるのはすごくいいですね。
vue-styleguide-generatorというコンポーネントのドキュメントを自動生成してくれるツールを使ってREADME欄を自動で作れないかな〜とか思っています。
最後まで読んでいただき、ありがとうございました。
試して見たソースコードはこちらにあげています。
Author And Source
この問題について(vue-playを触ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/44x1carbon/items/a5219ab35259e54433b3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .