Vue.js 入門 #5 – 開発ツールとビルド構築

Vue.js を利用したWebアプリケーション開発の手法を紹介していきます。
第五回目は Vue.js の 開発ツールとビルド構築について紹介していきます。

Vue.js を用いた開発

Vue.js を利用した開発を行う場合、
Vue.js Devtools と呼ばれるChrome の拡張機能を利用するのが便利です。

https://chrome.google.com/webstore/detail/vuejs-Devtools/nhdogjmejiglipccpnnnanhbledajbpd

Chrome インストールすることで、Chrome の検証ツールに Vue のタブが表示されます。

Vue タブ内では、 Components の内部動作を確認したり、イベントの発行を監視したりすることが出来ます。

Webpack を用いた開発フロー

Vue.js アプリケーションの開発には 通常 Webpack を用いたビルド構成が利用されます。

今回も、webpack-simple テンプレートを用いた環境を例に、
Webpack を用いた開発フローの例を紹介していきます。

webpack-simple テンプレートの環境構築は、vue-cli を用いて以下のコマンドで実施します。

$ vue init webpack-simple my-project
$ cd my-project
$ npm i 

webpack-dev-server とビルド

Vue.js の Webpack テンプレートを用いた場合、npm run dev を用いてサーバ環境を構築します。

$ npm run dev

これは Webpack dev serverの 提供する開発用のサーバ環境です。
ファイルの変更に応じて自動的にブラウザをリフレッシュしてくれるなど、開発用に便利な機能が整っています。

ブラウザは、.vue ファイルを理解できません。Webpack dev serverは、.vue ファイルを
JavaScript のコードに変換して ブラウザ上で実行可能にしてくれています。

レンタルサーバや VPS 等で動作する Apache や nginx などの通常のサーバでVueアプリケーションを配信する場合、
npm run build コマンドでビルドしたファイルを用意します。

$ npm run build

npm run build コマンドを実行するとdist/build.js が生成されます。

index.html で 以下のようにして 生成されたJavaScript を読み込むことで、
通常のWebサーバでも Vue.js アプリケーションを配信可能になります。

<script src="/dist/build.js"></script>

出力と dev server の設定

dist などの出力先は webpack.config.js 内で定義されています。

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

例えばこの dist を public/assets に変更することで、 public/assets/build.js が生成されるようになります。

  output: {
    path: path.resolve(__dirname, './public/assets'),
    publicPath: '/public/assets/',
    filename: 'build.js'
  },

HTML内での JavaScript 読み込みも 以下のように変更します。

<script src="/public/assets/build.js"></script>

場合によっては プロジェクトルートよりも publicなどのフォルダ内に html ファイルを配置したいと思うかもしれません。

webpack dev server で ルートのフォルダを変更する場合、
webpack.config.jsdevServer セクション内でcontentBase オプションを指定します。

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    contentBase: "public"
  },

これで webpack dev server は public フォルダをルートとしてファイルを配信するようになりました。
output.publicPath は Webサーバ上の配信アドレスを指定するエントリのため、contentBase を指定する場合は、少し工夫が必要です。

この場合、 public/assets を 単に assets と変更します。

  output: {
    path: path.resolve(__dirname, './public/assets'),
    publicPath: '/assets/',
    filename: 'build.js'
  },

HTML内での JavaScript 読み込みも 以下のように変更します。

<script src="/assets/build.js"></script>

Vue.js プロジェクトの構築

webpack.config.jsentry に指定するメインファイルは、以下のような形の構成になっています。

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

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

これで id app のDOM に対して、Vue アプリケーションを配置する事が出来るようになっています。

これまで紹介してきた方法では、 App.vue に画面を記述してきましたが、
通常のWebと同じく HTML に直接DOM を記述することも可能です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>0405_vue</title>
  </head>
  <body>
    <div id="app">
        <h1>Hello World</h1>
        <p>{{Date()}}</p>
    </div>
    <script src="/assets/build.js"></script>
  </body>
</html>

この場合、src/App.vue は必要ないため、 main.js は以下のようになるでしょう。

import Vue from 'vue'

new Vue({
  el: '#app',
})

この構成は既存のバックエンドのテンプレートエンジンとの相性が非常によく、
バックエンドシステムで画面を作成しながら、部分的にフロントの細かい制御が必要な部分でだけ、
Vue.js の記法を利用する事が出来るようになっています。

もちろんコンポーネントを利用することも可能です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>0405_vue</title>
  </head>
  <body>
    <div id="app">
        <h1>Hello World</h1>
        <app-date></app-date>
    </div>
    <script src="/assets/build.js"></script>
  </body>
</html>

main.js では以下のような形で コンポーネントを有効化します。

import Vue from 'vue'
import AppDate from 'src/AppDate.vue'

Vue.component("app-date",AppDate)

new Vue({
  el: '#app',
})

component はグローバルに利用可能となり、 Propsなどを用いてバックエンドからDBデータを割り当てるなどして活用することが可能になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です