소개

GitHub+CircleCI 입문 의 기사를 보고, 이 기사와 같이 실천하려고 하면, 이야기의 도중에 vue-cli 가 나오고 잘 모르기 때문에 , 실제로 움직여 봤던 것을 비망록의 뒤에 기사를 써 봐 네.

※ Web 프런트 엔드 개발 초보자입니다.

vue-cli란?

커맨드 라인을 사용하여 vue.js로 개발하기위한 사전 준비를 지원하는 도구 인 것 같습니다.
webpack도 함께 설치되어 프로젝트를 만들면 바로 개발을 시작할 수 있습니다.

webpack에 대한 설명은 여기 사이트이 쉽고 이해하기 쉽습니다.

설치

npm install로 설치합니다.
일단 버전도 확인.

설치

$ npm install -g @vue/cli
（省略）
$ vue --version
@vue/cli 4.4.6

프로젝트 만들기

vue create [プロジェクト名] 에서 프로젝트 만들기.

프로젝트 만들기

$ vue create my-project

vue create 명령을 입력한 후 질문을 받지만 원하는대로 설정합니다.
만약, 여기에서 선택하는 것을 잊어도, 나중에라도 도입할 수 있다(같다) 때문에 별로 신경쓰지 않는 편이 좋을 것 같습니다.

그건 그렇고, 이번에는 다음과 같이했습니다.

로컬 서버 시작

npm run serve 로 로컬 서버가 시작됩니다.

로컬 서버 시작

$ cd my-project
$ npm run serve

콘솔은 이런 느낌입니다 ↓


일단 움직인 것 같기 때문에 http://localhost-8080.com/ 에 액세스 해 보니 이제 Web 페이지가 작성되고 있었습니다. (너무 빨리!)

빌드

npm run build 로 빌드해 줍니다.

빌드

$ npm run build

이것에 의해서 무슨 일이 일어나고 있는가 하면, dist라는 디렉토리에 필요한 html, js, css등의 파일들을 좋은 느낌으로 정리해 주는 것 같습니다.

프로덕션 환경에는이 dist 디렉토리의 내용을 배포하면 좋을 것입니다.

Unit 테스트

인스톨의 옵션으로 Unit 테스트 기능도 추가해 두었으므로 실시해 보겠습니다.

Unit 테스트

$ npm run test:unit

콘솔상은 이런 느낌입니다.


분명히 test/unit/example.spec.js에 작성된 테스트 코드가 실행되고있는 것 같습니다.

겨우 일부러 실수해 봅니다.


뭔가 빨강이 나와서 대단한 일이었습니다.
이것은 --silent 옵션을 붙이면 좋다는 것입니다.

npm run test 할 때는 npm 로그를 끄는 것이 좋습니다.

Unit 테스트

$ npm run test:unit --silent

이것으로 실행하면 npm ERR!이 사라져 매우 깨끗했습니다.

린트

lint 란 포맷을 정돈해 주거나 코드상 좋지 않은 곳을 주의해 주는 것 같습니다.npm run lint 에서 실행합니다.

lint

$ npm run lint

실제로 이 명령으로 실행해 보았지만 잘 모르겠습니다.
일부러 실수해 보는 것 같은 기술을 했습니다만 검지해 주지 않았습니다. . . (왜?)
기본 설정만으로는 안되는 것 같습니다.
앞으로 이해하는대로 추가합니다.

예를 들어, 아래와 같이 import 의 철자를 일부러 잘못한 상태에서 npm run lint 를 실행하면 에러 부분을 검지해 주었습니다.


(하지만, 이것이 VSCode가 가르쳐 주므로 일부러 lint를 실행할 필요는 없다는 것은,,?, 누군가 lint의 효과적인 활용 방법을 가르쳐 주셨으면 합니다.)

사이고에게

일단 이번에 작성한 것을 GitHub의 리포지토리을 공개했습니다.

앞으로는 여기를 CircleCI에 연계하고 싶습니다.

다음글↓
CircleCI 시도해 보았습니다.