이전까지 nuxt.js 로 개발을 하다가 vue.js로 프로젝트를 만들기 위해 vue cli를 설치했다.
vue cli 설치
설치는 단순하다. 터미널에
npm i -g @vue/cli을 실행하면 설치 완료된다.
버전 확인
대부분의 블로그에서 버전 확인을 하라고 하면
vue --version을 실행하라고 하였다.
vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:/Users/aa/AppData/Roaming/npm/vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
라고 노출이 됩니다. 이게 뭔가 하며 엄청 찾고 찾고.. 어디서는 터미널을 cmd로 변경해라 등등 많은 글을 읽었다가 찾다보니 뒤늦게 알게 된 사실은 설치 이미지에 보이는 vue cli 버전 4.5.11 언제 버전 부터인지 모르겠지만
vue 명령어를 사용하지 않고 vue.cmd 명령어를 사용한다는 사실!!!
vue.cmd --version
정상적으로 확인 됩니다.
vue 프로젝트 생성
프로젝트 생성도 동일합니다.
vue create <project-name>실행하라고 써있습니다.
역시나 위와 동일하게 vue 명령어를 찾지 못해서 실행이 되지 않습니다. 위의 버전 확인과 동일하게
vue.cmd create <project-name>실행하게 되면 please pick a preset 이라고 나오고 하단 3개의 목록이 나오는데 방향키로 내린후 엔터를 누르면 선택이 됩니다. 전 여기서 Manually select features 를 선택합니다.
그리고 check the features needed for your project 가 나오는데 방향키로 이동후 spacebar로 선택을 하면 됩니다. 실수로 엔터 누르면 선택하지 못한채 다음으로 넘어가니 주의!!
전 여기서 Router / Vuex / CSS Pre-processors 를 추가 선택하였습니다.
2.x를 선택하였습니다.
router의 history모드를 Y로 선택하였습니다.
node-sass를 선택하였습니다.
ESLint with error prevention only 를 선택하였습니다.
Lint on save 를 선택하였습니다.
in package.json를 선택하였습니다.
Save this as a preset for future projects 는 N을 선택하였습니다.
프로젝트 생성!!
파일 > 폴더 열기 선택해서 생성된 프로젝트 폴더를 열면 끝입니다.
npm run serve 로 실행!!
