Vue-cliによるフロントエンドの開発環境構築まとめ

PHPやPythonと言ったサーバーサイドとは独立したフロントエンド(vue.jsとvue-router,vuex,jest)の環境構築方法をまとめます。
新しくフロントエンドを作った時に確認出来るように修正や更新が必要になった箇所は対応して行きます。

環境

npm:6.12.1
node:12.13.1
yarn:1.21.1
Vue-cli:4.1.1

npmとnode環境の構築

vue-cliをインストールする為にnpmの環境を用意する必要があります。
下記どちらかの手順で実施します。

nvmを使う場合

MacやAmazon Linuxで環境を構築する場合はnvmをインストールします。

git clone https://github.com/creationix/nvm.git ~/.nvm

nvmへのパスを通す。

$ source ~/.nvm/nvm.sh

OS再起動時にも設定を読み込めるように~/.bash_profileに下記の内容を追記する。

$ vim ~/.bash_profile

# nvm
if [[ -s ~/.nvm/nvm.sh ]] ; then
        source ~/.nvm/nvm.sh ;
fi

安定版のインストールと設定

$ nvm install stable
$ nvm use stable

これでnpmとnodeコマンドが使えるようになります。

nを使う場合

Dockerコンテナ上で環境構築した際に古いバージョンのものがインストールされる場合があります。
安定版のインストールの為にnをインストールしてバージョンの更新をかけます。

nodejs,npm,wgetのインストール

$ apt install -y nodejs npm wget

nのインストール

$ npm install n -g

安定版のインストールと設定

$ n stable

nodejs,npmのパージ

$ apt purge -y nodejs npm

これでnpmとnodeのバージョンが更新されます。

yarnのインストール

npmでもvue-cliをインストール出来ますが、パッケージのインストール速度を速める為にyarnをインストールします。

$ npm install -g yarn

vue-cliのインストール

yarnを用いてvue-cliをインストールします。

$ yarn global add @vue/cli

Vue-cliプロジェクトの作成

プロジェクトの作成
*vuex等は後でインストールすることにする。

$ vue create testProject

パッケージのインストール

$ cd testProject
$ yarn install

ローカルサーバーの起動

$ yarn serve

ブラウザで「localhost:8080」にアクセスするとTOPページを表示出来ます。

パッケージの追加

下記のパッケージを追加します。
テンプレートを別途用意する場合は「vuetify」はインストールしないようにします。

$ yarn add vue-router
$ yarn add vuex
$ yarn add axios
$ yarn add axios-mock-server
$ vue add vuetify
$ yarn add material-design-icons-iconfont
$ yarn add @vue/test-utils
$ yarn add --dev prettier
$ yarn add --dev stylelint

パッケージの設定

package.jsonの編集

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint:css": "stylelint src/**/*.css",
    "fmt": "prettier --write \"src/**/*.js\"",
    "mock:build": "axios-mock-server -b",
    "mock:watch": "axios-mock-server -w"
  },

.eslintrc.jsの作成と編集

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}

.stylelintrcの作成と編集

{
  "rules": {
    "color-hex-length": "short",
    "color-no-invalid-hex": true,
    "custom-property-no-outside-root": true,
    "indentation": 2,
    "length-zero-no-unit": true,
    "media-feature-name-no-vendor-prefix": true,
    "number-leading-zero": "never",
    "selector-root-no-composition": true,
    "string-quotes": "single"
  }
}

Vue Routerの設定

/src/router.jsを下記の通り編集します。
*TestPageは独自のコンポーネントを指します。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import TestPage from './components/Pages/TestPage.vue'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: HelloWorld
        },
        {
            path: '/test',
            name: 'test',
            component: TestPage
        },
    ]
})

vuexの設定

/src/store.jsの作成し、下記の通りに記載します。
testModuleは作成したコンポーネントのモジュールです。
testModuleにてstate, getters, actions, mutationsの設定を記述します。
(詳しくは割愛。)

import Vue from 'vue'
import Vuex from 'vuex'
import testModule from './store/modules/testModule'

Vue.use(Vuex)

const store = new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production',
    modules: {
        test:testModule
    },
    state: {

    },
    mutations: {

    },
    actions: {

    }
})

export default store

main.jsの設定

/src/main.jsを下記の通りに編集します。
axiosもimportして設定します。

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = axios

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

テスト環境の構築

Jestと関連のパッケージをインストールします。

$ yarn add @vue/test-utils
$ yarn add jest
$ yarn add vue-jest
$ yarn add babel-jest

babel-core、babel-preset-envは、package.jsonにてバージョンを指定した上でyarn installコマンドでインストールします。

2020年2月現在のバージョンは下記の通りです。

"babel-core": "^7.0.0-bridge.0",
"babel-preset-env": "^7.0.0-beta.3",

package.jsonのscriptsにJestを追記

"scripts": {
    "test:unit": "jest",
}

jest.config.jsの作成をし、テストの設定を記載します。

module.exports = {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}

これで一通りvue.jsとvue-router,vuexを使いunitテストも出来る開発の環境は構築出来ます。
後は好きなように実装して行きます！