앞서 로컬 환경에 Vue.js 개발 환경 설정을 완료하였으니 프로젝트를 생성해보자.
Vue CLI를 이용해 프로젝트를 생성해본다.
CMD 창을 켜고 프로젝트를 생성할 폴더로 이동해준다.
CMD 창을 켜지 않고 VS Code(Visual Studio Code) 하단 터미널에서 생성하는 것도 가능하다.
프로젝트를 생성하기 위해선 아래의 명령어를 입력해준다.
과거엔 vue init으로 프로젝트를 생성하였지만 Vue CLI >= 3 에서는 vue create를 사용한다.
vue create VueProject01
| PS D:\Study\Vue\VueExercises> vue init webpack-simple VueProject01 vue : 'vue' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + vue init webpack-simple VueProject01 + ~~~ + CategoryInfo : ObjectNotFound: (vue:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException |
VS Code를 켜둔 상태로 Node.js를 설치할 경우 VS Code에서 Node.js를 인식하지 못해 이미지와 같은 오류가 발생할 수 있으니 가급적 VS Code를 꺼둔 상태로 설치하거나 오류가 발생하면 VS Code를 재시작해야 한다.
VS Code를 재시작 후 다시 입력해보았더니 이번엔 다른 오류의 등장. 대환장 파티
| PS D:\Study\Vue\VueExercises> vue create VueProject01 vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\UserName\AppData\Roamin g\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies (https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + vue create VueProject01 + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess |
이는 현재 VS Code 터미널이 powershell이기 때문에 발생하는 에러로 vue 명령에 뒤에 .cmd(vue.cmd)를 붙여주거나 Command Prompt를 추가해주면 된다.
Command Prompt에 명령어를 다시 입력한다.
이제는 되겠지.
| Invalid project name: "VueProject01" Warning: name can no longer contain capital letters |
ㅎ..프로젝트 생성하는 것조차 쉽지 않네.
프로젝트 이름엔 대문자를 포함해선 안된다고 한다.
vue create vue_project_01프로젝트 생성을 위해 위의 명령어를 입력해준다_최종_찐막_찐찐막.txt
드디어 오랜 시간 끝에 Vue.js Project를 생성하였다.
cli를 이용한 덕에 알아서 내가 원하는 Vue.js version과 함께 프로젝트 기본 세팅을 완료해준다.
프로젝트 폴더 구조를 한번 톺아주고 src > App.vue 파일을 클릭하면 드디어 대망의 vue 파일을 열어볼 수 있게 된다.
cmd에서 프로젝트 폴더로 경로를 이동한 후 아래 명령어를 입력하면 로컬호스트에서 실행할 수 있게 된다.
npm run serve
영롱하다.
드디어 vue cli를 이용하여 프로젝트 생성 및 실행 완료!
Vue.js가 감지되었기 때문에 개발자도구(F12)에서 Vue.js devtools(크롬 확장프로그램)가 활성화된 것을 볼 수 있다.
'Development > Vue.js' 카테고리의 다른 글
| [Vue.js] Document 따라하기 - Reactivity Fundamentals (0) | 2022.05.27 |
|---|---|
| [Vue.js] Document 따라하기 - Template Syntax (0) | 2022.05.24 |
| [Vue.js] Document 따라하기 - Creating a Vue Application (2) | 2022.03.11 |
| [Vue.js] Vite를 이용하여 프로젝트 생성하기 (0) | 2022.03.10 |
| [Vue.js] 개발환경 설정 (0) | 2022.02.25 |