Vue にはコンポーネントという考え方があって、部品化しやすいようになっている。 部品とは何かといえば、骨格となる HTML、その見た目の CSS、挙動を表す JS を統合したものとなる。

この3つを統合して書けるのが .vue という ファイルになる。

webpack は標準で js はビルドできるが vueファイルは知らんので、 vue ファイルを呼んでビルドするためのプラグインを入れる。 こういう webpack にファイルの読み方を拡張するプラグインを loader と呼ぶ。

その名もズバリ vue-loader をインストールする。vue-template-compiler というのも合わせて必要になるのでインストールする

$ npm install --save-dev vue-loader vue-template-compiler

OK

webpack.config.js に vue-loader の設定を書く。

const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
module.exports = {
    entry: "./src/hoge.js",
    module: {
        rules:[{
            test: /\.vue$/,
            loader: "vue-loader"
        }]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

拡張子 .vue だったら vue-loader だぜということのようだ。

./src/hoge.vue ファイルを作る

このようなファイルになる。

<template>

<div>{{ say }}</div>

</template>

<script>

export default {
    data: function(){
        return {
            say: "HelloWorld"
        };
    }
}

</script>

js だけのファイルの時に template という項目があったが、それがタグになって上部に切り出された感じである。

script は script でよくわからない記述になっている。

この export default というのは ES6 の仕様で、このファイルが import された際に何も指定がなければ、この内容が返るという意味である。

エントリーポイントへはこのように組み込む。

import Vue from "vue"
import Hoge from "./Hoge.vue"
 
document.addEventListener("DOMContentLoaded", () => {
    new Vue({
        el: "#app",
        render: a => a(Hoge)
    });
});

全部出来たので、後は webpack でビルドすれば OK である。