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をインストールします。

```shell-session
git clone https://github.com/creationix/nvm.git ~/.nvm
```

nvmへのパスを通す。

```shell-session
$ source ~/.nvm/nvm.sh
```

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

```shell-session
$ vim ~/.bash_profile

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

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

```shell-session
$ nvm install stable
$ nvm use stable
```

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


##nを使う場合

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


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

```shell-session
$ apt install -y nodejs npm wget
```

nのインストール

```shell-session
$ npm install n -g
```

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

```shell-session
$ n stable
```

nodejs,npmのパージ

```shell-session
$ apt purge -y nodejs npm
```

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


# yarnのインストール

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

```shell-session
$ npm install -g yarn
```

# vue-cliのインストール

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

```shell-session
$ yarn global add @vue/cli
```

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

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

```shell-session
$ vue create testProject
```

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

```shell-session
$ cd testProject
$ yarn install
```

ローカルサーバーの起動

```shell-session
$ yarn serve
```

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



## パッケージの追加

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

```shell-session
$ 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の編集

```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の作成と編集

```javascript
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の作成と編集

```json
{
  "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は独自のコンポーネントを指します。

```javascript
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の設定を記述します。
(詳しくは割愛。)

```javascript
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して設定します。

```javascript
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と関連のパッケージをインストールします。

```shell-session
$ 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月現在のバージョンは下記の通りです。

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


package.jsonのscriptsにJestを追記

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

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

```javascript
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テストも出来る開発の環境は構築出来ます。
後は好きなように実装して行きます！