Vueでコンポーネントを作る時、意外といろいろな方法があります。そのため、毎回調べてしまうので記事にまとめてみました。
全体の流れ
- component.vueを書く
- app.jsでcomponent.vueを読み込む
- rollupでapp.jsを変換(dist/main.jsとする)
vue.jsとdist/main.jsを読み込む
インストールするパッケージ
以下のパッケージをインストールします。
$ npm i -D rollup rollup-plugin-vue vue-template-compiler $ # あるいは $ yarn add -D rollup rollup-plugin-vue vue-template-compiler
とりあえずな書き方
とりあえず以下の3ファイルをぶち込んで、最初に書いたパッケージをインストールすればだいたい動きます。
src/app.js
import Component from './component.vue'; const app = new Vue({ el: '#app', components: {Component}, template: `<component/>` });
index.html
<!DOCTYPE html> <meta charset="utf-8"> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="dist/app.js"></script>
rollup.config.js
import VuePlugin from 'rollup-plugin-vue'; export default { output: { format: 'umd' }, plugins: [VuePlugin()], };
こんな感じでコンパイルします(実際にはnpm run buildからできるようにpackage.jsonに書いてください)
$ npx rollup src/app.js -c -o dist/app.js --name App
