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

Menu & Search

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

2018年6月17日

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

 

最終の成果物

コードを見たほうが早いという人は、GitHubの下記リポジトリを参照し、実際にコードをダウンロードし、動かすと良い。既にReactやAngularでの開発経験があったり、package.jsonの中身を見て何をやっているか判断できるような人には時短のため強く推奨する。分からない場合は、この記事を読み進めると良い。また、チュートリアル中に詰まった際にも参照すると良い。

m-miyauchi/vue-tutorial: Vue tutroial of MMiyauchi Blog
https://github.com/m-miyauchi/vue-tutorial

 

チュートリアル

本チュートリアルは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を実行しておく。

最終的なチュートリアルの成果物は、https://github.com/m-miyauchi/vue-tutorialとなっている。

 

参考文献

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

NativeScriptの調査とReact Nativeとの比較

ちょっとした勉強会で…

sequelize-cliで「ERROR: null value in column “createdAt” violates not-null constraint」が出たときの対処

※sequelize…

React Native開発の良い点と注意点まとめ

React Native開発の良い点と注意点まとめ

React Nati…

Discussion about this post

コメントを残す

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

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

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