Edited at

Vue.js で簡単なフィードリーダーを作ってみる

More than 1 year has passed since last update.


はじめに

Vue.js の知識ゼロから SPA 用のプロジェクトを作って Unit/E2E テスト環境まで用意するまでの手順をまとめてみました。

今回の実装したサンプル: GitHub


手順


1. 環境構築

VueCLIでHelloWorld の 1. 環境構築 を参考にさせていただいてささっと構築させてきました。

npm install -g vue-cli

vue init webpack feed-reader
cd feed-reader
npm install
npm run dev

プロジェクトオプションは全てデフォルトを選択しました。

Project name feed-reader

? Project description A Vue.js project
? Author ****** ****** <******@*****.***>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

構築が終わったら npm コマンドでローカルサーバを起動できたら http://localhost:8080 にアクセスしてデフォルト画面が表示されることを確認します。

$ cd feed-reader

$ npm run dev

... 省略 ...
DONE Compiled successfully in 2775ms 08:49:36

I Your application is running here: http://localhost:8080

スクリーンショット 2018-07-04 8.53.24.png


2. Unit/E2E テストの実行確認

この段階で Unit/E2E テスト環境も揃ったので実行して全てのケースがパスするか確認してみます。

$ npm test

> feed-reader@1.0.0 test /作業ディレクトリPATH/feed-reader
> npm run unit && npm run e2e

> feed-reader@1.0.0 unit /作業ディレクトリPATH/feed-reader
> jest --config test/unit/jest.conf.js --coverage

● Deprecation Warning:

Option "mapCoverage" has been removed, as it's no longer necessary.

Please update your configuration.

Configuration Documentation:
https://facebook.github.io/jest/docs/configuration.html

PASS test/unit/specs/HelloWorld.spec.js
HelloWorld.vue
✓ should render correct contents (21ms)

----------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
HelloWorld.vue | 100 | 100 | 100 | 100 | |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.787s
Ran all test suites.

> feed-reader@1.0.0 e2e /作業ディレクトリPATH/feed-reader
> node test/e2e/runner.js

Starting selenium server... started - PID: 24965

[Test] Test Suite
=====================

Running: default e2e tests
✔ Element <#app> was visible after 37 milliseconds.
✔ Testing if element <.hello> is present.
✔ Testing if element <h1> contains text: "Welcome to Your Vue.js App".
✔ Testing if element <img> has count: 1

OK. 4 assertions passed. (5.116s)


3. SASS の有効化

src ディレクトリでコマンドを実行すると <style lang="scss"> が指定できるようになります。

npm install sass-loader node-sass --save-dev


3. フィードデータを取得

Vue.jsから手軽に始めるJavaScriptフレームワーク - 2nd Step を参考にさせていただいて Github の vuejs/vuejs.org リポジトリから Issue リストを取得して画面に描画します。


4. 画面を整形

CSS フレームワークの bluma を追加して画面を整形して完成です。

npm install bulma --save-dev

スクリーンショット 2018-07-04 10.52.42.png


参考にさせていただいた記事