Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vue-cliとElementUIでtiqavクライアントを作った

More than 3 years have passed since last update.

Angular Materialでtiqavクライアントを作った に引き続き、vue.jsでもtiqavクライアントを作ってみました。
vue.jsを初めて、チュートリアルの次に作ったものなので、あまりよろしくない作りの箇所もあるかもしれませんが、これくらいの規模のプロジェクトを一つ仕上げると色々勉強になるので、概要とリポジトリを紹介します。

Demo

スクリーンショット 2017-10-23 18.50.11.png

https://daikiojm.github.io/tiqav-vue-frontend/

注意: 使用するブラウザによっては混在コンテンツの警告が表示されます。
※ Google Chromeの場合はアドレスバーに表示される盾マークから混在コンテンツの許可を行うことで閲覧可能です。

概要

本家のtiqavにある、ランダム表示と検索の他、APIが用意されていた新着投稿(newest)画面も作りました。
画面一覧です。

  • Search(検索結果の表示)
  • Newest(新着投稿の表示)
  • Random(ランダムに取得した投稿の表示)
  • items(画像の詳細表示)

上記3つはサムネイル一覧を表示する画面になっていて、画像の詳細や関連画像を表示するDialogはすべての画面で共通のコンポーネントとして実装しています。本家tiqavにはない機能として、詳細表示画面でのタグの一覧表示と、タグクリックでの検索機能を実装しています。

使ったライブラリなど

CLI

開発にはvue-cliを使いました。
vue-routerのセットアップや、環境設定ファイルの作成などが初めからされているので、かなり快適に開発ができました。
使わない手はないかと思います。

$ vue -V 
2.9.1

プロジェクト作成時には webpack のテンプレートを使いました。

vue init webpack tiqav-vue-frontend
cd first-vue-app
? Project name tiqav-vue-frontend
? Project description A Vue.js project
? Author daikiojm <daiking.ca2@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
npm install
npm run dev

UIコンポーネントライブラリ

タイトルにもある通り、ElementUI を使いました。
カラムレイアウトや、form、buttonなどのコンポーネントの他、AutocompleteやTagなどの便利なコンポーネントが用意されているため、自分でCSSでスタイリングは最小限でクオリティが高いUIが実現できます。Bootstrapと似ているようで、一味違うデザインがいい感じです。

Ajax

vue-resourceが引退したらしいので、axios を使いました。
これを使っておけば間違いないっぽいです。
今回使ったtiqavのAPIはJSONP形式だったので、axios-jsonp というadapterをあわせて使いました。

Lazy Load(画像の遅延読み込み)

画像のLazyLoadには vue-lazyload を使いました。(newest,search,randomの画像一覧に使用)
使い方は簡単で、imgタグにv-lazyディレクティブを追加するだけです。

所感

今回は、各コンポーネントに定義したmethodでajax操作を行いViewテンプレートに内容を反映すると言った簡単な内容のみを行いましたが、vue.jsのデータバインディングの基本的な機能、vue-router、axiosなどを一通り使うことができました。
次はvuexによる状態管理を取り入れた更に大きい規模のアプリを作ってみようと思います。

ソース

https://github.com/daikiojm/tiqav-vue-frontend

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away