Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

Vueでコンポーネントを作る時の知見

Vueでコンポーネントを作る時、意外といろいろな方法があります。そのため、毎回調べてしまうので記事にまとめてみました。

全体の流れ

  1. component.vueを書く
  2. app.jsでcomponent.vueを読み込む
  3. rollupでapp.jsを変換(dist/main.jsとする)
  4. vue.jsdist/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