Vueのプロジェクト作成だけで躓いた

# 追記
記事内で`vue-cli`を使っていますが古いバージョンのようです。
`@vue/cli`を使用して再度書き直すつもりです。そしたら躓くこともないのかも…！
-> [書き直しました](https://qiita.com/knoth071211/items/00125e7010b759a68577)。すんなりできました。

# 初めに
VueJS触れるときのテンプレートとして作りました。
…がinitした状態のままテスト実行したら躓いたのでその対処法までです。

# 実施環境

```
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76
```

# Vueを使えるようにするまで
## npmを使ってVueCLIをインストールする
(今回はグローバルインストールしていない)

``` 
mkdir VueJsProjects
cd VueJsProjects
npm init -y
npm install vue-cli
```

## Vueのパスを通す

```
sed -i '' 's/\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"/\"vue\": \"vue\"/g' package.json
```

## プロジェクトを作成する
```
npm run vue init webpack hogehoge

? Project name hogehoge
? Project description vue project
? Author hogehoge@mail.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

... # インストール開始

To get started:

  cd hogehoge
  npm run dev
```

# 実行

```
cd hogehoge
npm run dev
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52392/79d9ba72-f5d0-0da9-9b83-e7355715b698.png)



## Git管理
ここではGitを使いバージョン管理を行う

```
git init
git add .
git commit -m "first commit."
```

# CI
CI/CDについても気になったので試してみる

```
npm test
```

セキュリティエラーでFAILに…。

```
 FAIL  test/unit/specs/HelloWorld.spec.js
  ● Test suite failed to run

    SecurityError: localStorage is not available for opaque origins
```

[調べてみる](https://github.com/coreui/coreui-free-vue-admin-template/issues/115)とjestのバージョンの問題の可能性があるらしい。

```test/unit/jest.conf.js
module.exports = {
  verbose: true,
  testURL: "http://localhost/",
  ...
}
```

上記を追加して再度実行

```
npm test
```

```
...
PASS  test/unit/specs/HelloWorld.spec.js
  HelloWorld.vue
    ✓ should render correct contents (23ms)

...

Running:  default e2e tests

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?
{
  value: {
    message: 'session not created: Chrome version must be between 71 and 75\n' +
...
```

jestは通ったがe3eでエラー。
chromedriverのバージョンをチェックする

```
$ npm list | grep chromedriver
├─┬ chromedriver@2.46.0
```

```
$ npm info chromedriver versions
[
  ...
  '2.46.0',  '73.0.0',   '74.0.0',
  '75.0.0', '75.0.1', '75.1.0',  '76.0.0',  '76.0.1',   '77.0.0',
  '78.0.0', '78.0.1', '79.0.0',  '79.0.1',  '79.0.2',   '79.0.3',
  '80.0.0', '80.0.1'
]
```

chromedriverをアップデートする。
chromeは普段最新版しか使わないのでドライバーも最新版を使うようにする。

```
sed -i '' 's/\"chromedriver\": \"^2.27.2\"/\"chromedriver\": \"latest\"/g' package.json
npm install -dev
npm list | grep chromedriver
```

```
├─┬ chromedriver@80.0.1
```

アップデートが完了したので再度実行

```
npm test
```

```
Running:  default e2e tests
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 ✔ Element <#app> was visible after 103 milliseconds.
 ✔ Testing if element <.hello> is present.
 ✔ Testing if element <h1> contains text: "Welcome to Your Vue.js App".
 ✔ Testing if element <img> has count: 1

OK. 4 assertions passed. (8.794s)
```

テストが実行できるようになったので後処理。

```
git add .
git commit -m "hoge"
git remote add origin [作成済みのリポジトリを使用]
git push -u origin master
```

# まとめ（というか感想）
Vueをインストールしてテスト&実行するだけですが割と手順が必要でした。
（そのままテストくらいパスするようにならないかな…？:thinking:）
解決してまとめてみるとこれくらいの分量ですがnpmをあまり触っていなかったこともあり結構ハマりました。