普段思ったことや、雑記。

Menu & Search

Vueの製品レベルの環境構築を時短でおこなうチュートリアル

2018年6月17日

2019年9月16日追記:

記事の内容が古くなりました。vue-cliやNuxtを使うことを推奨します

環境変化により、WebPackを一から設定を記述してJavaScriptアプリケーションを開発することも少なくなってきたように思えます。この記事の内容も古くなっており、現環境ではvue-cliNuxt.jsを使い、必要であればそれらの設定をさらに自身で変更する、のようなやり方が現実的だと思われます。

Reactなど、他JavaScriptフレームワーク(ライブラリ)を製品レベルの開発をやってた人からすると、さっさとESLintやwebpackのコンフィグ書いて、ファイルごとにコンポーネントを分割し(単一コンポーネント)、SPAを早く書きたい。そういった、製品にVueを導入する前提の環境設定を行う適切なチュートリアルがまとまっていなかったので(webpackの設定が単一コンポーネントでは動かない設定であったり、ESLintの設定をスキップしていたり…)、本記事でそれを手っ取り早く実現する方法を紹介する。
本記事では、Vueの基本的な書き方はサンプルコードの掲載に終わっている。Vue自体に触れるというよりかは、開発にVueを導入しようとするJavaScript開発者が、時短のために製品レベルの環境設定のサンプルを学習し、より早くVueを製品へ導入するための勘所を得るために読む記事である。あくまで、Vueの環境構築が目的の記事なので、Vue自体のシンタックスの学習であったり、Vue自体に触れることが目的の場合、vue-cliを使えば目的を達成できるはずだ(Reactでいうところのcreate-react-appの位置付けのツール)。

チュートリアル

本チュートリアルはNode.js v8以上、yarn 1.6以上がインストールされていることが前提である。また、エディタの設定はVisual Studio Codeを対象としている。また、Linuxコマンドを打つので、WindowsではBashが動作する環境を推奨するか、コマンドを一部読み変えて実施する。

推奨条件

  • Node.js v8以上がインストールされていること
  • yarnがインストールされていること
  • Visual Studio Codeがインストールされていること
  • Visual Studio CodeなどのエディタにESLintプラグインがインストールされていること

1.プロジェクトの作成

適当なディレクトリ下において、下記コマンドを実行する。

2.NPMパッケージのインストール

本チュートリアルに必要なnpmパッケージをインストールする。インストール内容な下記、package.jsonの内容を参照し、作成する。内容物的には、ESLint、webpackでの実際のVue開発で必要な、ほとんど最低限のnpmパッケージをインストールするような内容となっている(※ESLintの設定はAirbnbとしてある)。プロジェクトのルート直下にて、package.jsonを作成する(npm initのほうが行儀が良いが、設定をコピーするため今回はpackage.jsonを手動にて作成)。

package.jsonの内容は下記のようにする。

package.jsonを作成したら、下記コマンドでパッケージをインストールする。

yarnがインストールされていない場合、npm installを実行する。

3.ESLintの設定

ESLintの設定を行う。プロジェクトのルート直下に.eslintrc*(アスタリスク以下は、拡張子なし、もしくは.js,.jsonなど)を作成し、設定内容を記述する。今回は、実際の開発で使うことを想定したために、JavaScriptファイルにはAirbnbの設定を継承し、Vueの単一コンポーネントファイルには公式リポジトリの「eslint-plugin-vue」を適用している。eslint-plugin-vueのLintの強度については、GitHubの公式リポジトリのドキュメントを参照し、適宜設定する。

また、エディタによっては.Vueファイルを検知しない設定になっていることがあるので、適宜設定を行う。Visual Studio Codeの場合は、設定ファイルのESLintの項目に、下記のハイライトされた箇所を書き加える。

エディタにてLintが機能しているかは、後ほど設定全般が完了してから確認をする。

3.webpackの設定

webpackの設定ファイルを記述する。vue-loader公式ドキュメントの設定をベースに、下記のような設定を記述したwebpack.config.jsを作成する。

 4. Vueファイルの作成とwebpackによるコンパイル

Vueファイルを作成し、webpackにてコンパイルを実行する。

では、Vueの開発ディレクトリが/appとなっている。そのため、/appディレクトリをプロジェクトのルート直下に作成する。

/app直下に、index.jsを作成し、下記のような内容とする。これは、Vueアプリケーションのエントリーポイントである。

次に、/app直下に、index.jsにてマウントされるApp.vueを作成する。

この時、使用エディタにて.vueファイルのLintが実行されているかを確認する。
次に、package.jsonに下記設定が追加されていることを確認する。

確認できたら、Webpackでのビルドを実行する。プロジェクト内にて下記コマンドを実行する。

yarnがインストールされていない場合cは、npm run buildと実行する。
ビルドが成功すると、プロジェクトのルート直下に/buildディレクトリが生成され、配下にbundle.lsが生成されている。これでビルドが完了である。しかし、実際に動く様子がこのままでは確認ができないので(Vueコンポーネントのマウント先がない)、App.vueをマウントするための簡単なHTMLファイルを作成する。下記のようなHTMLファイルを/build直下にindex.htmlとし、作成する。

このHTMLファイルの要点としては、bodyタグ内部にて、App.vueコンポーネントのマウント対象のdivファイルが定義されていることと、body内部にてwebpackにてビルドされたbundle.jsがロードされていることである。
index.htmlが作成できたら、下記のコマンドを実行する

これは、webpackのビルドコマンドを監視サーバ化したものだ。ビルドコマンドとは異なり、現状の設定ではオンメモリによる変更のみで、bundle.jsは出力されない。ブラウザでhttp://0.0.0.0:8081/にアクセスをして、画面に「Hello from App component!」と表示されたら正常に動作している。
webpackのビルドサーバは、この先においても使用するので、このままwebpackサーバを立ち上げたままにする。

5. 子コンポーネントの読み込み(Vueに理解があれば、読み飛ばし可)

ここはどちらかというとAppendixのようなもので、既にVueに理解があれば特に読む必要はない。App.vueにて呼び出す子コンポーネントを、作成する。/app直下に/componentsを作成し、/components直下にChild.vueを作成する

Child.vueを下記のように記述する。

次に、App.vueからChild.vueを読み込み、Childコンポーネントをマウントする。App.vueを下記のように変更する。変更箇所は、templateタグの内部とscriptタグの内部である。

変更が完了したら、ブラウザでhttp://0.0.0.0:8081/にアクセスをし、「Hello from App component!」と表示された直下に「Hi! I’m child component.」と表示されれば、Vueアプリケーションは正常に動作している。

Vueアプリケーションの正常動作時の画面。

これで、チュートリアルは完了だ。終わったらCtrl + Cでwebpackのサーバを落としてあげるのと、最終的な成果物を保持するために、yarn buildを実行しておく。

参考文献

Vue Loader | Getting Started
https://vue-loader.vuejs.org/guide/

vuejs/eslint-plugin-vue: Official ESLint plugin for Vue.js
https://github.com/vuejs/eslint-plugin-vue

vscode-eslint doesn’t work on .vue files · Issue #281 · Microsoft/vscode-eslint
https://github.com/Microsoft/vscode-eslint/issues/281

Article Tags
mmiyauchi

プログラムを書きながらTranceを聴くのが良いですね。みなさんも聴いたほうがいいですよ、Trance。EDMよりハードトランスでしょ。

Related article

Redux(react-redux)における適切な配列要素の更新

2021年8月23日…

CloudFlareの『SSL/TLS 暗号化モード(HTTPS通信設定)』を使用したとき、『ERR SSL VERSION OR CIPHER MISMATCH』のエラーでChromeで発生し、接続できない場合の対処

英語の記事は見当たっ…

Dart(Flutter)についての所見

Dart(Flutter)についての所見

第一印象では、クロス…

Discussion about this post

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Type your search keyword, and press enter to search
%d人のブロガーが「いいね」をつけました。