--- title: vue-cli無しでvueの単一コンポーネントファイルを使用する。scssも。 tags: JavaScript Vue.js http-vue-loader Sass author: friendship_hero slide: false --- # 経緯 よく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) # サンプル1 これで単一ファイルコンポーネントを使用できました。 ```html:index-1.html
``` ```vue:vc-main-1.vue ``` ### サンプル1の注意点 「module.exports = {」の箇所が「export default {」だとダメな様子です。 # サンプル2 scssを使用する こんな風にするとscssも使用できるみたいです。 ```html:index-2.html
``` ```vue:vc-main-2.vue ``` ### サンプル2の注意点 IEだとできませんでした。。。 なにか方法があるかもしれませんが。 以上です。 vue-cliが使用できない場合にとても便利かも。