Guide

Vue.js

  1. Vueインスタンスを生成する
  2. 個別のDOMに突っ込んで描画する

Vue CLI

Vue CLI v4 🎉

具体的な変更内容については 公式ページ をご確認いただければと思います。

Vue CLI v3 のインストール

間違ってもv2をインストールしないよう、注意してください。

これを前提として、 Node.js v8.9.0 以上であることを確認してください。

# @vue/cli
npm i -g @vue/cli

これにより、 vue コマンドを使えるようになります。

具体的なインストール方法は割愛します。プロジェクト作成は、Vue CLI Installationをご確認ください。

# Vue CLI
vue create vue-cli-sample

TypeScriptを使う場合は Manually select features を選択します。オプションは後からでも追加できるので、とりあえず適当に入れておきましょう。

Netlifyにデプロイ

簡単に動作確認する場合Netlifyを使うのがオススメ。

事前に設定ファイル .toml を準備します。

[build]
publish = "dist"
command = "npm run build"

容易にデプロイできますね!

# Build
vue-cli-service build
Netlify Consoleより操作

Github等のアカウントを所有していれば OK Netlifyより、サインアップできます。

netlify

Gitlab-CIの設定

Gitlab-CI では Node Image を前提にして、ステージを Lint / UnitTest / Transpile に分けて対応します。

# 一括でイメージを設定するなら
#image: node:latest

stages:
  - ESLint
  - UnitTest
  - Transpile
  - Deploy

少しハマったこととして package-lock.json等の .lock ファイルを .gitignoreに入れないよう注意します。

Lintの設定

TypeScriptを使っているので欠かさず @typescript-eslint をインストールします。

"ESLint":
  image: node:10 # 個別でイメージを設定するなら
  stage: ESLint
  script:
    - |
      npm install eslint \
      eslint-plugin-vue \
      @typescript-eslint/parser \
      @typescript-eslint/typescript-estree
    - node_modules/eslint/bin/eslint.js .
  cache:
    key: "${CI_PROJECT_ID}_cache_yarn"
    paths:
      - .yarn-cache/
      - node_modules/
Unitテストの設定

npm run test:unit を叩きます。

"Unit Test":
  image: node:10 # 個別でイメージを設定するなら
  stage: UnitTest
  dependencies:
    - 'ESLint'
  script:
    - npm install --progress=false
    - npm run test:unit
  cache:
    key: "${CI_PROJECT_ID}_cache_yarn"
    paths:
      - .yarn-cache/
      - node_modules/
トランスパイル

Webアプリケーションのデプロイは Vue CLI | Gitlab-CIへのデプロイ をご確認ください。

"Transpile":
  image: node:10 # 個別でイメージを設定するなら
  stage: Transpile
  dependencies:
    - 'Unit Test'
  script:
    - npm ci
    - npm run build
#    - mv public public-vue
#    - mv dist public
    - mkdir output
    - mv dist output/dist
#    - cp -pr output/dist public
  cache:
    key: "${CI_PROJECT_ID}_cache_yarn"
    paths:
      - .yarn-cache/
      - node_modules/
  artifacts:
    paths:
      - output/dist
  only:
    - master

npm run build を叩くことで dist に吐き出さる仕組みです。

デプロイ

Netlify Console [Site Settings] で API IDNETLIFY_SITE_ID 確認します。

続いて同じく Netlify Console [Oauth] で NETLIFY_PUBLISH_KEY を設定します。

Gitlab CI - Access Token

NETLIFY_SITE_ID / NETLIFY_PUBLISH_KEY を確認できたら、 Gitlab-CI [Settings] で設定します。

Gitlab CI - Environment Variables
"Deploy":
  image: node:10 # 個別でイメージを設定するなら
  stage: Deploy
  dependencies:
    - 'Transpile'
  before_script:
    - npm i -g netlify-cli
  script:
    - netlify deploy -s $NETLIFY_SITE_ID --auth $NETLIFY_PUBLISH_KEY -p --dir output/dist
  only:
    - master

Nuxt

Vue CLI同様 @vue/cli をインストールする必要があります。プロジェクト作成は、Nuxt Installationをご確認ください。

# Vue CLI
npx create-nuxt-app nuxt-sample

Netlifyにデプロイ

簡単に動作確認する場合Netlifyを使うのがオススメ。

事前に設定ファイル .toml を準備します。

[build]
publish = "dist"
command = "npm run build"

容易にデプロイできますね!

# Build
nuxt build

UIフレームワーク

Quasarを除いて、大体経験あり。

Bootstrap-Vue

bootstrap-vue をインストールします。

# bootstrap-vue
yarn add bootstrap-vue

事前に読み込むことで準備完了。

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Scoped CSSを利用して views/Index.vue で読み込みます。

@import '~bootstrap/scss/bootstrap.scss'
@import '~bootstrap-vue/src/index.scss'

注意すること

旧バージョンの bootstrap との競合や jQuery を使わざるを得ない場面が来るかもしれません。

  1. b-form-input で日本語IMEが効かない

  2. b-popover でイベント発火しない

    • b-dropdown で代用

Tailwind CSS

VueとJestを使う

並列実行されていること。カバレッジやスナップショットのように、プラグイン不要で内製されていること。 TypeScriptとの親和性も高いなど、テストツールに Jest を採用するメリットは多いです。

# Jestを TypeScriptで使う
yarn add babel-jest jest ts-jest vue-jest -D

前提として以下のように Babelを使います。

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                'targets': {
                    'browsers': ['> 1%', 'last 2 versions']
                }
            }
        ]
    ],
    plugins: [
        '@babel/plugin-syntax-dynamic-import'
    ]
}

jest.config.jsを書く

基本的に特異な設定要らず。

module.exports = {
    testMatch: [
        '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ],
}

Vue/TypeScriptそれぞれのトランスパイラを設定します。

module.exports = {
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
          'jest-transform-stub',
        '^.+\\.tsx?$': 'ts-jest'
    },
}

テスト対象の Componentを指定する際に起点となるパスを設定します。

module.exports = {
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1'
    },
}

テストを書くための準備はこれにて完了しました。

テストの対象は src/components に所属するコンポーネントなど。 Vuexを使う場合は src/store に所属するモジュールとなります。一方これらのコンポーネント、モジュールに対するテストを tests/unit で書きます。

.
├── frontend
│   ├── public
│   │   ├── index.html
│   ├── src
│   │   ├── components
│   │   │   ├── atoms
│   │   ├── store
│   │   ├── types
│   │   ├── App.vue
│   │   ├── main.ts
│   ├── tests
│   │   ├── unit
│   │   │   ├── atoms

Component向けテストを書く

Vuex向けテストを書く

書籍