vue-cli3 개발 환경 구축

vue-cli 개발 환경을 구축하기 전 기본 개발 환경입니다.

node같은 경우는 추후에 버전을 맞출 것을 생각하여 nvm으로 관리하는 것이 좋습니다.

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

nvm-setup으로 nvm 설치 후 nvm install v12.13.1, nvm ls, nvm use v12.13.1을 통해 node 관리 가능

git bash를 열고 다음의 명령어를 입력합니다.

$ npm i -g @vue/cli

설치 후 다음과 같은 명령어를 입력하고 버전이 출력되면 정상 설치

vue-cli가 설치된 것을 확인했으면 바로 프로젝트 생성을 하면 됩니다.

$ vue create test-project

위의 명령어를 입력하게 되면 어떤 것으로 설치할 지 선택하라고 나오는데 'Manually select features'를 선택하여 세부사항을 선택해줍니다.

프로젝트에 추가할 요소들을 선택하라고 나오는데 여기서 'Router', 'Vuex', CSS Pre-processors'를 추가로 선택해줍니다.

그 다음 Vue.js의 버전을 선택하라고 하는데 저는 ~~3.x의 버전을 선택했습니다.~~ 2.x버전을 선택해주세요.

router의 history 모드를 사용할 것인지의 여부인데 y를 선택했습니다.

css 전처리기의 선택 화면인데 저 같은 경우에는 scss를 사용하여 node-sass를 선택했습니다.

linter 선택 화면입니다. 저는 prettier까지 추가로 설정하는 것을 선택했습니다.

그 다음 lint 특성 추가와 config 설정은 잘 모르는 관계로 default로 설정했습니다.

그 뒤에 현재 설정한 값들은 나중에 다시 vue-cli를 만들때 현재 설정한 값들로 그대로 사용할 수 있게 할 것인지의 여부입니다. y를 하면 별칭만 추가로 적어주면 됩니다. 저는 이미 만들어 뒀으므로 n을 입력했습니다.

위의 설정값까지 정해주면 이제 프로젝트가 생성됩니다. 생성 된 뒤 다음과 같은 커맨드를 따라하라고 돼있는데 그대로 따라해주면 됩니다.

커맨드를 따라했을 경우 서버가 실행되는 주소가 나옵니다. 따라 들어가보면 생성한 vue project의 메인 화면을 확인 할 수 있습니다.

추가 구성사항

설치 후 서버를 실행해보면 다음과 같이 중앙에 el-button이 잘 나오면 설치 성공

usang0810