はじめに

モダンモダンしたフロントエンド開発としてvue.jsに入門したいが、モジュールバンドラやらトランスパイラやらで「うーん」となる方は多いのではないでしょうか。

自分はそのクチです。。。

しかしながら、parcelというその辺をよしなに自動でやってくれるツールがありますので、
今回エコシステムは楽をして、vue.jsに入門しようと思います。

parcel+vue.jsでHelloWorldするところまで出来ましたので、簡単にまとめます。

バージョンなど

yarn=>1.6.0
parcel=>1.9.7
vue.js=>2.5.17

前提

npmではなく、基本的にyarnで進めていきます。
(yarnのインストールなどは省きます)

手順

プロジェクトのディレクトリを作成します

mkdir hello_world
cd hello_world

yarn initでpackage.jsonを作成します。

色々聞かれますが、ここは基本的にEnter連打でいいと思います。

$ yarn init
yarn init v1.6.0
question name (hello_world): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json
✨  Done in 2.19s.

yarnでパッケージを落としつつ、package.jsonに記録していきます。

-Dをつけることで開発用としてパッケージに追加します。

yarn add parcel@1.9.7 -D

vueをパッケージに追加します。

yarn add vue@2.5.17

　　　
この時点でだいたいこんな感じのファイル構造になるのではないでしょうか。

hello_world
├── node_modules　
├── package.json
└── yarn.lock

　　
package.jsonはこの時点でこんな感じになります。

package.json

{
  "name": "hello_world",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel": "1.9.7"
  },
  "dependencies": {
    "vue": "2.5.17"
  }
}

ここからコードを書いていきます。
ソースコードはsrcというディレクトリに格納していきます。

srcというディレクトリと、HelloWorld用のファイルを追加

hello_world
 ├── node_modules
 ├── package.json
+├── src
+│   ├── App.vue
+│   ├── index.html
+│   └── index.js
 └── yarn.lock

index.htmlはシンプルにdivをひとつだけ置き、最後にjsを読み込みます。

src/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

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

index.jsではvue本体と、この後作成するApp.vueを読み込んで、
先ほどのindex.htmlのdiv#appにマウントしています。

src/index.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render:h => h(App)
});

実は上のコードはこのままだと、import Vue from 'vue';で、'vue'なんか無いよと怒られてしまいます。
自分はここで地味にはまってしまったのですが、これはpackage.jsonを修正するとうまく動きます。
(ちなみにこの記事中で設定ファイルに触るのはここだけです。)

下記の通りにaliasという項目を増やすと、importの際に自動で指定したパッケージを読みに行ってくれます。

package.json

{
  "name": "hello_world",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel": "1.9.7"
  },
  "dependencies": {
    "vue": "2.5.17"
+ },
+ "alias": {
+   "vue": "./node_modules/vue/dist/vue.common.js"
  }
}

App.vueは、ここでは特に詳しく解説しませんが、単一ファイルコンポーネントというやつです。

src/App.vue

<template>
    <p>{{ greeting }} World!</p>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                greeting: 'Hello'
            }
        }
    }
</script>

<style scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>

後は、package.jsonがあるディレクトリに戻り、parcelで実行するだけです。
yarn parcelでparcelのコマンドを実行できます。

yarn parcel src/index.html

http://localhost:1234にアクセスすると無事Hello Worldが見えるはずです。

もし試していて、見れなかったらごめんなさい。

最後に

去年(2017)の年末はparcelが出現して、結構話題になっていた（物議を醸し出していた？）と思うのですが、最近はあまりqiitaで記事を見かけないなーという印象です。

最近のバージョンではvue.jsの標準サポートが入ったり¹、開発もちゃんと進んでいるようなので、
ひとまずparcelの上で簡単なSPAなりを作ってみて、後からwebpackやbabelなどで凝った開発に手を出すという学習パスも選択肢のひとつとしてどうだろうなー、と思う次第です。

parcelが出た当初、vueを使うにはプラグインを使わなければいけませんでした。現在ではこのプラグインは非推奨になっています ↩

parcel + vue.jsでHelloWorldしてみた

はじめに

バージョンなど

前提

手順

最後に