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 / Formatter`は`ESLint + Airbnb config`, `Unit Testing`は`Jest`を選択。

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

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


設定内容は下記の通り

```javascript: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`を作成

```javascript:[project_root]/src/sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;
```

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

```javascript:[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を使用可能にする。

```diff
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](https://buefy.github.io/documentation/)にはUI COMPONENTSの一覧があり、
その中にEXAMPLE(UI COMPONENTSの実際動きの確認ができて、コードも有る)があるので、
自分の使いたいUI COMPONENTSのコードを、自分のファイルにコピーすれば基本的にはOKです！

今回は[Datepicker](https://buefy.github.io/documentation/datepicker)を使ってみます。

```diff
- <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`など、不要なコードを削除しましょう。