JavaScript
cloud9
Vue.js
vue-cli
Buefy

Try! Vue CLI 3(インストール~プロジェクト作成~テスト~Buefy使用)


はじめに

本記事はタイトルの通り、Cloud9でVue CLI 3をインストールして、プロジェクトを作成して、jestを使ったテストまでトライしてみたものになります。

Cloud9特有の設定やVue CLI 3から採用された新しいものがあったので、メモ代わりに記事にしてみました。

(追記: 2018/11/12)

Buefyのインストール~UI COMPONENTSの使用を追加。


開発環境

Cloud9 - template:Blank

OSはUbuntuなので、同じOSなら殆ど同じように進められると思います。


NVMのインストール

template:Blankにも関わらずnode.jsがインストール済なので、複数のバージョンを管理する為にNVMをインストール

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash


node.jsのインストール

Vue CLI 3 推奨のバージョン[8.11.0]をインストール

nvm install 8.11.0


デフォルトのnode.jsのバージョンを8.11.0に変更

nvm alias default 8.11.0

バージョンの確認

node --version


Yarnのインストール

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn

インストールの確認

yarn --version


Vue CLIのインストール

yarnでインストールすると正常にCLIが動作しなかった為、npmでインストール。

npm install -g @vue/cli

参考: 動作しなかった時に実行したコマンドはyarn global add @vue/cli


Vueプロジェクトの作成

vue create [プロジェクト名]


Vueプロジェクトの設定(PWAやLinterなど)


Please pick a preset:


  • default(babel, eslint): デフォルト設定

  • Manually select features: PWAやVuexなど、defaultに存在しない機能を使用する場合に選択

本記事ではManually select featuresを選択。


Check the features needed for your project:

必要とする機能をspaceキーで選択。全て選択する場合はaキーで一括選択が可能。選択が終わったらEnter

本記事ではBabel, Progressive Web App (PWA) Support, Linter / Formatter, Unit Testingを選択。


各機能の設定

パッケージマネージャーの設定の他、Linter / Formatterを選択した場合はツールやStyleGuideの設定、Unit Testingを選択した場合はテストツールの設定等を行います。

本記事ではパッケージマネージャーはyarn, Linter / FormatterESLint + Airbnb config, Unit TestingJestを選択。


Cloud9の為の設定

デフォルトの設定の場合、localhostがCloud9ではなく、使用中のパソコンを見てしまい、正常に起動しない為、設定ファイルを作成・編集。

[project_root]直下にvue.config.jsを作成して設定。(webpack.config.jsではない)

設定内容は下記の通り


vue.config.js

module.exports = {

devServer: {
host: '0.0.0.0',
disableHostCheck: true
}
}

[project_root]は、vue createで作成されたプロジェクト名と同じ名前がついたフォルダ


ひな形ページをローカルサーバーで実行

cd [project_root]

yarn run serve


Jest(ユニットテスト)の実行

全てのテストを実行する場合は、

yarn run test:unit

指定のファイルだけテストする場合は

yarn run test:unit [ファイル名]

デフォルトだと[project_root]/tests/unit/*.spec.(js|jsx|ts|tsx)がテストの対象。

テスト対象の設定は[project_root]/jest.config.jsファイル内のtestMatchで変更可能。(vue createの時の設定次第ではpackage.jsonになると思われる)


e.g. sum関数のテスト

sum関数がコーディングされたsum.jsを作成


[project_root]/src/sum.js

function sum(a, b) {

return a + b;
}
module.exports = sum;

sum.jsをテストするsum.spec.jsを作成


[project_root]/tests/unit/sum.spec.js

const sum = require('@/sum');

test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});


sum.spec.jsの1行目の@[project_root]/srcを示している。

つまり@/sum[project_root]/src/sum.jsはイコール。

この@[project_root]/srcにマッピングしている設定は、[project_root]/jest.config.js内のmoduleNameMapperで行っている。

テストを実行

yarn run test:unit sum.spec.js


Buefy

CSSフレームワークのBuefyをインストールして使用してみる。


Buefyのインストール

yarn add buefy

[project_root]/src/main.jsを編集してBuefyを使用可能にする。

import Vue from 'vue'

+ import Buefy from 'buefy'
+ import 'buefy/dist/buefy.min.css'
import App from './App.vue'
import './registerServiceWorker'

+ Vue.use(Buefy)


BuefyのUI COMPONENTSを使用してみる

試しにHelloWorld.vueのtemplateを削除して、BuefyのUI COMPONENTSを使用してみます。

BuefyのDocumentationにはUI COMPONENTSの一覧があり、

その中にEXAMPLE(UI COMPONENTSの実際動きの確認ができて、コードも有る)があるので、

自分の使いたいUI COMPONENTSのコードを、自分のファイルにコピーすれば基本的にはOKです!

今回はDatepickerを使ってみます。

- <template>-->

- <div class="hello">-->
- <h1>{{ msg }}</h1>-->
- <p>-->
- For guide and recipes on how to configure / customize this project,<br>-->
- check out the-->
- <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.-->
- </p>-->
- <h3>Installed CLI Plugins</h3>-->
- <ul>-->
- <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>-->
- <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>-->
- <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>-->
- <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>-->
- </ul>-->
- <h3>Essential Links</h3>-->
- <ul>-->
- <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>-->
- <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>-->
- <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>-->
- <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>-->
- <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>-->
- </ul>-->
- <h3>Ecosystem</h3>-->
- <ul>-->
- <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>-->
- <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>-->
- <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>-->
- <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>-->
- <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>-->
- </ul>-->
- </div>-->
- </template>-->
+ <template>
+ <b-field label="Select a date">
+ <b-datepicker
+ placeholder="Click to select..."
+ icon="calendar-today">
+ </b-datepicker>
+ </b-field>
+ </template>

上記コードは、Buefyの動作を確認する為に最小限の修正だけを記載したものです。

当たり前ですが、本番時は削除したコードでしか使用していないpropsなど、不要なコードを削除しましょう。