Help us understand the problem. What is going on with this article?

Parcelで作るSPAじゃないVue.js環境構築

More than 1 year has passed since last update.

Parcelを使うと簡単にフロントエンドの開発環境構築ができますが、複数ファイルのエントリファイルに対応しているのを知ったので試してみたいと思います。

Parcelのインストール

$ npm install --save-dev parcel-bundler
$ npm install vue

複数のhtmlファイルを作成

一つ目の画面作成

まずIndexページ作成を作成します。

src/index.html

<html>
  <body>
    <div id="app">
      <app></app>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

エントリファイルを作成します。

src/index.js

import Vue from 'vue/dist/vue.esm.js';
import App from './App.vue';

Vue.component('app', App);

new Vue({ el: '#app' });

Indexページで使用するVueコンポーネントを作成します。

<template>
  <div>
    {{ message }}
  </div>
</template>

<style>
</style>

<script>
  export default {
    name: 'App',
    data() {
      return({
        message: 'Index page',
      });
    },
  }
</script>

二つ目の画面作成

今回はSPAじゃないので複数画面があり、各画面に対してエントリファイルを読み込む形にします。

次に同じようにAboutページを作成します。

src/about.html

<html>
  <body>
    <div id="app">
      <about></about>
    </div>
    <script src="./about.js"></script>
  </body>
</html>

src/about.js

import Vue from 'vue/dist/vue.esm.js';
import About from './About.vue';

Vue.component('about', About);

new Vue({ el: '#app' });

src/About.vue

<template>
  <div>
    {{ message }}
  </div>
</template>

<style>
</style>

<script>
  export default {
    name: 'About',
    data() {
      return({
        message: 'About page',
      });
    },
  }
</script>

Parcelコマンドの設定

package.jsonに複数ファイルをwatchモードで実行できるよう設定します。

"scripts": {
    "start": "parcel src/*.html",
    "watch": "parcel watch src/*.html"
},

実行してみる

まずParcelをwatchモードで実行します。

$ npm run watch

すると最初はParcelが必要な依存関係をインストールしてくれて、ビルドが走ります。

ビルド後は対象のファイル変更を検知してHot Reloadが効いてくれます。

ビルドファイルはデフォルトで/distへ出力されます。

watchモードではwebサーバーが起動しないので、http-serverを使ってアプリを動かします。

$ npx http-server dist -p 8000

起動したら、localhost:8000localhost:8000/about にアクセスしてみるとVueが動いているのがわかります。

まとめ

Parcelを使うことでVueの開発環境が驚くほど簡単に構築できました。

複数ファイルをサポートしているのも嬉しいですね!

参考

daiki7nohe
RubyとかAngular、React書いてます。 クラウド使ってできるだけ楽をしたい。
fusic
個性をかき集めて、驚きの角度から世の中をアップデートしつづける。
https://fusic.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした