아까의 Vue CLI 웹 사이트 좌측 메뉴에서 Creating a Project를 클릭하자.
다시 cmd를 열어서 설치를 원하는 폴더로 이동 후 vue create "이름"을 입력하면 옵션이 나온다.
디폴트(기본)로 하면 가장 기본 세팅으로 설치가 되며, Manually select features를 선택하면, 원하는 기능을 추가로 설정할 수 있다.
보통 Router(라우터)와 Vuex는 기본적으로 사용하므로 체크해주자.
그 이후에는 따로 건드리는 것 없이 Enter를 눌러 쭉쭉 넘기다보면 설치가 진행되는 모습을 볼 수 있다.
설치가 완료가 되면 본인이 설치를 진행한 폴더에 test1이라는 폴더가 생긴 모습을 볼 수 있다.
이제 설치된 test1이라는 폴더로 이동하여, 파일 목록을 확인하면 위와 같은 파일들이 있다.
Vue PC에 설치하지 않고 쓰는 법
npx @vue/cli create "이름"라는 명령어를 통하여 npm만 설치가 되어있다면 쓸 수도 있다.
폴더 열기
이제 설치를 통해 받아진 test1이라는 폴더를 에디터를 통해서 열어보자. VS CODE를 사용할 예정이다.
TIP
VS CODE를 직접 열어서 해당 폴더를 여는 방법
CMD를 화용한 방법
1번 방법은 다들 익숙할 것이라고 생각되어 2번을 잠깐 소개하자면 터미널을 통하여 해당 폴더로 먼저 이동해준뒤 code . 명령어를 작성하면 해당 폴더의 파일들이 vs code를 통해 열 수 있다. 해당 폴더로 이동후 code . 명령어를 통해 Visual Studio Code를 열어준다.
node_modules 폴더
Vue.js가 사용하는 *npm 패키지들이 여기에 들어간다. 예를 들어 @vue 패키지가 들어가 있는 모습을 볼 수 있다.
package.json
프로젝트를 할 때에 필요한 패키지 디펜던시들이 들어가 있다.
devDependencies는 개발할 때에 필요한 디펜던시라고 볼 수 있다.
src
대부분 우리가 코딩을 할때 소스코드는 src(source)폴더 안에 들어가게 된다.
main.js를 살펴보면 Vue, router 등 import가 되어 있는 모습을 볼 수 있다.
그 후 Vue 인스턴스를 생성하고, import한 router와 store(vuex)를 넣어져 있고, App.vue 탬플릿 등 또한 id=app에 들어가 있는 모습을 볼 수 있다.
id=app 은 public폴더 안에 있는 가장 기본이 되는 index.html에서 찾을 수 있다.
화면 확인
VS CODE에서 터미널을 열어 npm run serve라고 입력하면, 빌드를 시작합니다.
빌드가 종료되면 아래쪽에 https://localhost:#### 이라고 나와 있는 부분을 복사해 웹 브라우저에 입력한다.
App.vue 에 있는 탬플릿 내용이 웹 브라우저에 표시되는 것을 볼 수 있다.
좋은 점은 웹 브라우저를 리로드 하지 않아도 VS CODE에서 느낌표를 붙여 수정한 후 저장만 해도 바로 바로 적용되는 모습을 확인 할 수 있다.
Review
언제나 처음 세팅하는 작업은 정말 어렵고, 지루한 작업인 것 같습니다.
물론 그 과정을 통해 작동되는 모습이 신기하신 당신은 참! 개발자 이시겠지요.^^
다음에는 보다 더 재미있고 실제로 어떻게 Vue를 더 깊게 다룰 수 있는지 같이 공부해 보겠습니다. 감사합니다!
