2018-10-17に更新

PhoenixでbrunchのままVueを使う

Vueといえばwebpackというイメージだが、Phoenixを使うと最初からbrunchが入っている。 webpackを使うこともできるが色々と設定するのも面倒なので、簡単にbrunchのまま使うための方法。

ちなみに下記で紹介されている方法と同じ。

Phoenix, Brunch and VueJS: Part 2 - Baroni Tech

とりあえずVueをインストール

npm install vue

そしてbrunchで使えるようにするためのライブラリもインストール。 両方無いと動かない。

npm install --save-dev babel-plugin-transform-runtime vue2-brunch

サンプルのGithubのbrunch-config.jsを見てみると、下記のようになっているので追記。 (aliasesを追記)

  npm: {
    enabled: true,
    aliases: {
      'vue': 'vue/dist/vue.common.js'
    }
  }

あとは元々あったapp.jsに下記を追記するだけでもう動く。

import 'vueify/lib/insert-css'
import Vue from 'vue'
import Hello from './components/hello.vue'

new Vue({ 
  el: '#container',
  components: { Hello }
});

上記であればhtml上のid=container要素内のhelloタグがあれば動作する。 勝手にcontainer内が全部置きかわってしまったりなどはしないので、 一部だけ実装したいとかでも可能。 非常に簡単で便利。


dala00

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント