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内が全部置きかわってしまったりなどはしないので、
一部だけ実装したいとかでも可能。
非常に簡単で便利。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント