Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

経緯

よく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様の記事で知りました。

サンプル1

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

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>

サンプル1の注意点

「module.exports = {」の箇所が「export default {」だとダメな様子です。

サンプル2 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>

サンプル2の注意点

IEだとできませんでした。。。
なにか方法があるかもしれませんが。

以上です。
vue-cliが使用できない場合にとても便利かも。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away