hoang.the.toan

2018.03.01

Vue-cliでVueアプリケーションを作ってみる

はじめに

お久しぶりです。Letro 事業部のトアンです。

二週間前にベトナムに帰って日本に戻ってきたばかりです。

最近、仕事で JavaScript を使ったタスクが増えてきています。そこで、JS フレームワークを勉強したいと思いましたので、 Vue.js の勉強をはじめました。

コマンドラインツール(CLI)は、フレームワークにとって便利な機能であり、テンプレートを素早くビルドするのに役立ちます。 Vue.js には vue-cli ツールがあり、数行のコードで非常に簡単に Vue.js を使ったアプリケーションをビルドできます。

今回は vue-cli で Vue のアプリケーションを作ってみましょう。

インストール

  • vue-cli を使うためには Node.js と npm が必要です。

  • vue-cli のインストール

プロジェクトの作成

ここでは webpack というテンプレートを使い、[sample]というプロジェクトを作成します。

alt text

  • ローカルサーバでホストする

ブラウザで http://localhost:8080/ をアクセスすると以下の画面が表示されます。

alt text

プロジェクトを作成したあとは、ファイル構成は以下となります。

alt text

  • main.js: Vue アプリケーションが起動するところ。
  • App.vue: index.html ページのレンダリングに使用されるコンポーネント。
  • assets: 画像、音楽ファイルなど、ページに挿入されるリソースが含まれます。
  • components: Vue アプリケーションをモジュレーションするように設計されたコンポーネントが含まれています.
  • router: アプリケーションに実装されているルータを含むディレクトリ.

ソースコードを編集してみましょう

ニュースページとサービスページを作ってみます

  • router/index.js

componentsの中にNews.vueとService.vueという2つファイルを作成します。

  • News.vue

  • Service.vue

 

最後にHelloWorld.vueを編集します。

 

ブラウザをリロードすると、以下の結果となります。

alt text

vue-cliツールを使用すると、Vue アプリケーションをすばやく作成し、npm、webpack の設定ファイルも自動的に作成されます。必要なライブラリパッケージをインストールしてコードを書くだけです。
便利なツールだと思いますので、Vue.js を利用している方はぜひ試してください。

参考