Allied ArchitectsAllied ArchitectsEngineer Blog

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

2018/03/1 Vue.js

はじめに

お久しぶりです。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 を利用している方はぜひ試してください。

参考

hoang.the.toan
  • hoang.the.toan

RELATION ENTRY

Webpackはどんなもの?

Webpackはどんなもの?

2017/12/1 未分類

はじめに はじめまして、ベトナムから今年の1月に日本へ来て11ヶ月になるトアンです。趣味はサッカーやアニメを見ることです。 今回初めてエンジニアのブログを書くため緊張していますがよろしくお願いします。 最近、webpackというものが流行っているとのことで自分も触ってみました。 webpack...

続きを読む

hoang.the.toanの記事一覧へ

ページTOPへ