vue-cli無しでvueの単一コンポーネントファイルを使用する。scssも。

# 経緯
よく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](https://github.com/FranckFreiburger/http-vue-loader)というものがあるそうです。
[@horikeso様の記事で知りました。](https://qiita.com/horikeso/items/d2f00c39e8571f3ff310)

# サンプル１
これで単一ファイルコンポーネントを使用できました。

```html: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>
```


```vue: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も使用できるみたいです。

```html: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>
```



```vue: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が使用できない場合にとても便利かも。