(この記事は「fukuoka.ex Elixir／Phoenix Advent Calendar 2018」の4日目です)
こんにちは、@koga1020です。 早いもので、Advent Calendarのシーズンですね。全然冬らしくない暑さの福岡よりお届けしております（笑）
本題
以前、Phoenix + Vue.js入門 を投稿したのですが、こちらの記事ではVue.jsの部分はサクッとCDNから利用する方法で書いていました。
本記事では、Phoenix1.4に標準で入っているWebpack環境を利用してVueの単一ファイルコンポーネント（.vueファイル） のビルド環境を整える手順をまとめたいと思います。
環境
- Elixir 1.7.3
- Phoenix 1.4.0
前提
- Phoenix1.4の環境が作れている
- 上記環境で、npm or yarn を叩ける状態
まで進めている方を想定しています。
以下に、検証用に作ったdocker-composeを置いておきます。「これから環境作ってみる」という方は使えるかもしれません。
手順
パッケージのインストール
vue, vue-loader, vue-template-compilerを入れます
cd assets
yarn add vue
yarn add -D vue-loader vue-template-compiler
webpack.config.jsの修正
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 追加
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: './js/app.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
// 追加
{
test: /\.vue$/,
use: {
loader: 'vue-loader'
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
// 追加
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
}
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]), // ← 末尾のカンマをお忘れなく！
new VueLoaderPlugin() // 追加
]
});
js/app.jsの修正
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import css from "../css/app.css"
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"
// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"
// 以下を追加
import Vue from 'vue';
import App from './App.vue';
new Vue(App).$mount('#app');
App.vueの作成
js/App.vueを作成後、以下を記述します
<template>
<div>タイトル: {{ title }}</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
title: 'This is App.vue!!'
}
}
}
</script>
app.html.eexの修正
vueコンポーネントをマウントする、id="app"の要素を追加します。mainタグの中をごそっと変えてみましょう
<main role="main" class="container">
<div id="app"></div>
</main>
ビルド
assetsフォルダ内で、以下を叩きましょう。
yarn run watch
ビルド対象ファイルの変更を検出して自動でビルドが走るようになります。これでApp.vueに書いた内容もビルドされています。
Phoenixを起動
yarn run watchがフォアグラウンドで動いているので、別シェルでPhoenixを起動してください。
mix phx.server
ウェルカム画面を確認
App.vueに書いた内容が表示されました！
まとめ
Phoenix1.4からデフォルトで準備されているwebpackを用いて、vueの単一ファイルコンポーネントを利用できる状態になりました。あとはvue-routerやaxiosあたりを追加していけば良さそうです。
明日の「fukuoka.ex Elixir／Phoenix Advent Calendar 2018」5日目の記事は， @takasehideki さんの「ElixirでIoT#2.3：ラズパイの温湿度と超音波センサ値をPhoenixでサクッと？リアルタイム表示」です。お楽しみに！