처음에

Vue의 프로젝트 작성만으로 망설였다. 을 쓸 때 원래 이전 버전의 vue-cli 를 사용하고 있었던 것을 재작성했습니다.

VueJS 만질 때 템플릿으로 만들었습니다.
프로젝트 작성 → 로컬에서 실행 → 테스트를 실행할 수 있는 것을 목표로 합니다.

구현 환경

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

$ node -v
v13.9.0

$ npm -v
6.14.2

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 create hogehoge
Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: hogehoge_preset
? Pick the package manager to use when installing dependencies: Yarn

...(中略)

🎉  Successfully created project portfolio.
👉  Get started with the following commands:

 $ cd hogehoge
 $ yarn serve

unittest 참고: h tps : // ㅔ 에- st- 중 ls. 아 js. rg/쟈/구이로 s/초오신 g-아-st-루응 r. HTML
E2E 참고: h tps:// 퀵했다. 소 m/오s1마/있어 MS/5429CD8화12아C43아6아803

실행하기 전에

yarn을 사용하지 않으므로 설치로 시작합니다.

$ brew install yarn
$ yarn --version
1.22.4

실행

cd hogehoge
yarn serve

Git 관리

git 저장소는 자동으로 만들어집니다 ....

$ git status
On branch master
nothing to commit, working tree clean

자동 테스트

unittest

$ yarn test:unit
yarn run v1.22.4
$ vue-cli-service test:unit
 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    ✓ renders props.msg when passed (29ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.007s
Ran all test suites.
✨  Done in 5.50s.

e2e 테스트

$ yarn test:e2e

화면 테스트 자동화 좋아요!

후처리

푸시한다면

git remote add origin [作成済みのリポジトリを使用]
git push -u origin master

요약

일반적으로 쉽게 VueJs 테스트 실행까지 할 수있었습니다.
지난번 과 같이 버전 미스라든지로 낭비에 시간을 걸리지 않도록 주의해 가고 싶네요.