はじめに

JSを周りあまり得意ではありません。

環境

  • windows10
  • yarn 1.12.3
  • rollup v1.27.0

やりたいこと

VueJSの単一ファイルコンポーネントを作成したいと考えています。
以前以下のやり方で単一ファイルコンポーネントを作成することができました。
https://nnahito.com/articles/41

しかし、このやり方は、VueJSをCDNから呼んでいるため、最近試すと以下のエラーでできなくなっていました。

ReferenceError: __vue_normalize__ is not defined

なので、VueJSも一緒にバージョン管理を行いたいと考えています。

やったこと

実際やって、ハマっているポイントです。
結論を先に。

  • VueJSをyarn addしたあとどうすればいいかがわからない

とりあえず、単一ファイルコンポーネントコンパイル用のJSにVueを読み込んでみましたがだめでした

import Vue from './node_modules/vue/dist/vue.js';
import TestComponent from './TestComponent.vue';

new Vue({
    el: "#app",
    components: {
        "TestComponent": TestComponent,
    },
});

rollup.config.jsで、vuejsを吐き出してみてもだめでした

import vue from 'rollup-plugin-vue';
import commonjs from 'rollup-plugin-commonjs';

export default [
    {
        input: './main.js',    // コンパイルする情報が書かれたファイル
        output: {
            format: 'iife',
            file: './bundle.js'    // 書き出しファイル
        },
        plugins: [
            commonjs(),
            vue({
                compileTemplate: true,
            }),
        ]
    },

    {
        input: './vue.js',    // コンパイルする情報が書かれたファイル
        output: {
            format: 'iife',
            file: './vue_bundle.js'    // 書き出しファイル
        },
        plugins: [
            commonjs(),
        ]
    },
];

↑で読み込んでいるvue.js

import Vue from './node_modules/vue/dist/vue'

window.Vue = Vue

知識がなさすぎて、これ以上思いつかず…
お力を貸していただけますと幸いです。

よろしくお願いたします。