글을 시작하며,
해당 포스팅은 아래의 강의를 참고하였습니다.
4시간만에 완벽하게 끝내는 Vue.js 입문 & Vue.js 3.x 최신버전
Vue 시작하기
Vue 설치
VsCode 상단 툴바에서 터미널을 실행시켜줍니다. 만약, VsCode가 설치되어 있지 않는다면 해당 링크를 통해서 홈페이지로 이동하여 설치 할 수 있습니다.
이후 아래의 멍령어를 실행시켜 줍니다.
1
vue --version
해당 명령어는 설치되어있는 vue의 버젼을 확인하는 명령어 입니다. 저는 5.0.8버젼을 사용하고 있기에 ‘@vue/cli 5.0.8’와 같은 메세지가 출력되었습니다.
만약, vue가 설치되어있지 않는다면 vue를 설치해야합니다.
vue를 설치하기 위해서 먼저 Node.js를 설치해보도록 하겠습니다.
Node.js는 해당 링크1를 통해서 공식 홈페이지에서 설치 할 수 있습니다. LTS나 Current 중 아무 버젼이나 설치하시면 됩니다.
이렇게 설치가 완료되었다면, VsCode를 실행시킨 후 상단부에 있는 터미널을 실행시킵니다. 이후 아래의 명령어들을 실행시켜 vue를 설치해줍니다.
1
2
npm install -g vue
npm install -g @vue/cli
vue cli까지 설치했으면 vue –version을 이용하여 vue가 잘 설치되었는지 확인합니다.
이제 vue에서 사용 할 수 있는 확장프로그램을 설치해야 합니다. 에디터 왼쪽의 확장 탭을 선택하여 Vetur을 설치합니다.
이렇게 기본 환경 설치는 끝났습니다.
Vue 프로젝트 생성
Vue 프로젝트 생성하는 법에 대해 알아보도록 하겠습니다.
1
vue create project01
위와 같은 명령어를 통해 프로젝트를 생성 할 수 있습니다. 해당 포스팅에서는 프로젝트 이름을 projcet01로 지정하여 작업하겠습니다.
이제 Vue 프로젝트를 어떻게 생성할지 선택해야 하는데, 기본적으로 vue3과 vue2를 지원합니다. 키보드 위아래 버튼을 통해서 이동 할 수 있습니다.
저희는 Manually select features를 이용하여 프로젝트를 생성하겠습니다.
- 해당 화면에서 선택은 스페이스바, 다음 화면으로 이동은 엔터를 사용합니다.
Check the features needed for your project Babel : 최신 스크립트를 구 버젼에서도 사용 할 수 있게 끔 변환 TypeScript : TypeScript를 사용 시 체크해야함. Progressive Web App (PWA) Support : 모바일처럼 웹을 구현할 수 있게 만들어주는 기술 Router : 메뉴를 구성 후 화면 이동이 가능하도록 만들어줌. Vuex : 모든 vue 컴포넌트에서 접근 가능한 저장소 Linter / Formatter : 해당 프로젝트 내에서 동일한 코딩 규칙을 수행하도록 설정
Choose a version of Vue.js that you want to start the project with 이후 3.x 버젼 선택
Use history mode for router? use history mode for router에서 y를 입력.
Pick a linter / formatter config ESLint는 문법을 체크해주는 역할. 여기서는 Standard config를 사용한다.
Pick additional lint features: Lint on save 이후 Lint on Save를 선택하여 저장 할 때 문법 체크를 수행한다.
Where do you prefer placing config for Babel, ESLint, etc.? 설정 옵션들을 별도의 옵션으로 관리를 하거나 package.json 하나로 관리
Save this as a preset for future projects? 프리셋 저장
Save preset as: 프리셋 이름 설정
마지막으로 아래 명령어들을 입력하여 정상적으로 프로젝트가 생성되었는지 확인합니다.
1
2
cd project01
npm run serve