yarnを使ってVue.jsをwebpackで導入

      2018/01/02

最近ギラギラと脚光を浴びているjavascriptフレームワークVue.js

今回はこのVue.jsをwebpackで動かすための手順を説明していきます。

まずは作業ディレクトリの作成。

そして最近はnpmよりもyarnの方がイケてるという情報を耳にするのでyarnを使っていきます。

yarnについてはmacであれば簡単にインストール可能です。下記リンクが参考になるかと思います。

https://qiita.com/masterkey1009/items/50f95b1187646a7db385

色々聞かれるけど、Enter連打でOK。

次にwebpackでVue.jsを動かすのに必要なものをゴリゴリインストールしていきます。

インストールが完了したら、clientディレクトリ配下にwebpack.config.jsを作成して下記の通り編集します。

エントリーポイントとなるファイル、ビルドの出力先、開発用サーバーの設定などなど設定しています。

おまじないについてはこちら参照。

開発用サーバーの起動アクションも登録しておきましょう。自動生成されているファイルなので、scriptの部分だけ追加すればOKです。

設定ファイルの記述が完了したら実際に表示に使われるhtmlファイル、Vue.jsを記述するjavascriptファイルを作成します。ディレクトリ名については設定ファイルと整合していればお好みで。

htmlファイルの方はひとまずの導入ですので、最小限の記載で。出力されるファイルのインポートを忘れないように!僕は最初忘れました!

今回の主役であるVue.jsを使用したjavascriptコードです。やっていることはid指定した要素の変数を設定しているイメージです。

あとは作成したjavascriptをビルドして、開発用Webサーバーを起動しましょう。

ブラウザからhttp://localhost:4000/にアクセスしてHello Vue!と表示されれば完了です!お疲れ様でした。

 - プログラミング , ,