はじめに
本記事はタイトルの通り、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ではない)
設定内容は下記の通り
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を作成
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.jsをテストする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など、不要なコードを削除しましょう。