経緯
よくvue関連の情報で「単一ファイルコンポーネントを使用するにはvue-cliが必要」と目にする気がします。
情報例：
・https://jp.vuejs.org/v2/guide/single-file-components.html
（「これはあなたがまだ使ったことのない、いくつかの追加ツールの使い方を学ぶことを意味します。」「Vue CLI 3 を確認することをお勧めします。」）
単一ファイルコンポーネントはとても便利なのですが、vue-cliは学習敷居が高いので以下のような困った場面があります。
・手早く単一ファイルコンポーネントを学習したい。
・既存のwebシステムにvueを適応させたい。単一ファイルコンポーネントありで。
・開発メンバーにvueを普及させたい。
「node.jsとかnpmとかwebpackとかvue-cliとか使用せずに単純にhtmlからvueファイルを使用したい」「できれば、スタイルシートもscssで記述したい」と思っていたところ、http-vue-loaderというものがあるそうです。
@horikeso様の記事で知りました。
サンプル１
これで単一ファイルコンポーネントを使用できました。
index-1.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<vc-main-1></vc-main-1>
</div>
<!-- promise (IEに必要) -->
<script src="https://unpkg.com/es6-promise"></script>
<!-- vue -->
<script src="https://unpkg.com/vue"></script>
<!-- http-vue-loader -->
<script src="https://unpkg.com/http-vue-loader"></script>
<script type="text/javascript">
//メインコンポーネント
var vue = new Vue({
el: '#app',
components: {
'vc-main-1': httpVueLoader('vc-main-1.vue') //他階層にあるなら、('js/components/vc-main-1.vue')の様な指定も可能
}
});
</script>
</body>
</html>
vc-main-1.vue
<template>
<div class="vc-main-1">
<h1>Hello</h1>
<p>{{message}}</p>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
message: 'こんにちは'
}
}
}
</script>
<style>
.vc-main-1 h1{
font-size: 3.5rem;
}
.vc-main-1 p{
font-weight: bold;
}
</style>
サンプル１の注意点
「module.exports = {」の箇所が「export default {」だとダメな様子です。
サンプル２ scssを使用する
こんな風にするとscssも使用できるみたいです。
index-2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<vc-main-2></vc-main-2>
</div>
<!-- promise (IEに必要) -->
<script src="https://unpkg.com/es6-promise"></script>
<!-- sass -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.13/sass.sync.min.js"></script>
<!-- vue -->
<script src="https://unpkg.com/vue"></script>
<!-- http-vue-loader -->
<script src="https://unpkg.com/http-vue-loader"></script>
<script type="text/javascript">
//set sass to http-vue-loader
httpVueLoader.langProcessor.scss = function(scssText) {
return new Promise(function(resolve, reject) {
Sass.compile(scssText, function(result) {
if (result.status === 0)
resolve(result.text)
else
reject(result)
});
});
}
//メインコンポーネント
var vue = new Vue({
el: '#app',
components: {
'vc-main-2': httpVueLoader('vc-main-2.vue')
}
});
</script>
</body>
</html>
vc-main-2.vue
<template>
<div class="vc-main-2">
<h1>Hello</h1>
<p>{{message}}</p>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
message: 'こんにちは'
}
}
}
</script>
<style lang="scss">
.vc-main-2 {
h1{
font-size: 3.5rem;
}
p{
font-weight: bold;
}
}
</style>
サンプル２の注意点
IEだとできませんでした。。。
なにか方法があるかもしれませんが。
以上です。
vue-cliが使用できない場合にとても便利かも。