[Vue] vue-cli 사용, vue ui 사용

vue-cli 설치

npm install -g @vue-cli

자세한 내용은 https://cli.vuejs.org/guide/installation.html

cmd 에서 vue ui 실행

실행 시 자동으로 접속됨

만들기 탭 > 새 프로젝트 만들기 클릭

프로젝트 폴더 입력, 패키지 매니저 선택, 추가옵션 선택

기본 프리셋은 babel,eslint 플러그인이 설치된다.

Manual로 선택해서 다양한 플러그인을 선택해본다.

Babel, Router, Vuex, Linter/ Formatter, Unit Testing, E2E Testing, Use config files 선택

linter/ formatter config 선택, testing solution 선택, E2E testing solution 선택

직접 선택하고 설정한 내용을 preset으로 저장함. 나중에 다시 선택 가능함

필요한 패지키 설치를 하면서 초기 구성해준다.

자동으로 생성된 기초 코드 및 폴더 구조

npm run serve 명령어 실행

실행된 결과 화면

vue ui를 활용해서 손쉽게 기초 코드를 만들 수 있다.