추가

기사 내에서 vue-cli를 사용하고 있지만 이전 버전 인 것 같습니다.@vue/cli 를 사용하여 다시 다시 작성하겠습니다. 그렇다면 망설이지 않을지도…!
-> 다시 작성했습니다. . 괜찮아요.

처음에

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 [email protected]
? 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

Git 관리

여기에서는 Git을 사용하여 버전 관리를 수행합니다.

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

시

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

알아보기 과 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
├─┬ [email protected]

$ 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

├─┬ [email protected]

업데이트가 완료되었으므로 다시 실행

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를 설치하고 테스트하고 실행하기 만하면 할인 단계가 필요했습니다.
(그대로 테스트 정도 패스하게 되지 않을까…? )
해결해 정리해 보면 이것 정도의 분량입니다만 npm를 그다지 만지지 않았던 적도 있어 상당히 빠졌습니다.