Phoenix1.4에서 vue 환경 구축 노트(Part1: 단일 파일 구성 요소를 사용할 수 있을 때까지)

(이 기사는 「fukuoka.ex Elixir/Phoenix Advent Calendar 2018」의 4일째입니다)

안녕하세요, ㅎㅎ 입니다. 빠르고, Advent Calendar의 시즌이군요. 전혀 겨울답지 않은 더위의 후쿠오카보다 전달하고 있습니다(웃음)

주제

이전에 Phoenix + Vue.js 입문 을 투고했습니다만, 이 기사에서는 Vue.js의 부분은 사쿳과 CDN에서 이용하는 방법으로 쓰고 있었습니다.

이 기사에서는 Phoenix1.4에 표준으로 들어 있는 Webpack 환경을 이용하여 Vue의 단일 파일 컴포넌트(.vue 파일)의 빌드 환경을 정돈하는 순서를 정리하고 싶습니다.

환경

Elixir 1.7.3

Phoenix 1.4.0

전제

Phoenix 1.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 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에 쓴 내용이 표시되었습니다!

요약

Phoenix 1.4부터 기본적으로 준비된 webpack을 사용하여 vue의 단일 파일 구성 요소를 사용할 수 있습니다. 그리고는 vue-router나 axios 근처를 추가해 가면 좋을 것 같습니다.

내일 'fukuoka.ex Elixir/Phoenix Advent Calendar 2018' 5일째 기사는 @ 타카 세히 씨의 'Elixir에서 IoT # 2.3 : 라즈파이의 온습도와 초음파 센서 값을 Phoenix에서 바삭하게? 실시간 디스플레이'입니다. 기대하세요!