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

12507 ワード
Buefy vue-cli Vue.js cloud9 JavaScript JavaScript テキストリンク

はじめに

本記事はタイトルの通り、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ではない)

設定内容は下記の通り

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

Exception AttributeError:''NoneType'object has no attributeエラー
PythonはJsonデータを処理する