VueJSを単一ファイルコンポーネントで内包(?)したい
はじめに
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
知識がなさすぎて、これ以上思いつかず…
お力を貸していただけますと幸いです。
よろしくお願いたします。