ParcelJSでVueJSを使ってみる

この記事の目次

ParcelJSの準備

VueJSの準備

ファイルの準備

index.html

app.js

ビルドする

ブラウザで見てみる

設定ファイルが不要という、ParcelJSを触ってみましょう。
2019/09/23現在では、ParcelJSの公式にVueJSの使い方が載っていなかったので、
このやり方で合ってるかはわかりませんが、やばかった。

ParcelJSの準備

npm install -g parcel-bundler

インストールが終わったら、正常にインストールされているかの確認

parcel -V
# 1.12.3

VueJSの準備

yarn add vue

node_modulesフォルダが作成される。

ファイルの準備

適当に準備していきます。
全部同階層に置いていきます。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    hoge page

    <hr>

    <div id="app"></div>

    <script src='./dist/app.js'></script>
</body>
</html>

app.js

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

new Vue({
  el: '#app',
  components: {
    MyApp,
  },
  template: '<my-app></my-app>',
});

以上です。