공부를 하다가 vue3가 나왔다는 것을 알게 되었다.
현재 내가 공부하는 버전은 vue2.5로 공부하고 있었는데, 공부하는 김에 새로운 버전인 Vue3로 공부를 하기로 결정 하였다.
Vue3을 사용하기 위해서는 먼저 npm으로 vue를 설치해야한다.
npm install -g vue@next
npm install -g @vue/cliVue Cli
해당 모듈은 뷰 프로젝트를 빠르게 생성해주는 프로그램이다.
프레임워크 형식으로 정해진 형식으로 미리 만들어 주어 어디서든 정해진 규격으로 수 많은 프로젝트를 안정적으로 제작할 수 있는 것이 장점이다.
vetur
추가 적으로 해당 확장 프로그램을 받아 코드 하이라이트, 스니펫, 포메팅을 지원해주는 확장 프로그램을 받아 사용한다.
뷰 프로젝트 생성
vue create {프로젝트 이름}해당 명령어를 입력하면 뷰 프로젝트를 생성할 옵션들이 나오게 된다.
필자는 첫번째 Defalut Vue 3를 사용할 것이다.
화살표로 이동하면서 옵션을 선택하면 된다.
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features정상적으로 생성이 되면, success project 문구가 나타나게 된다.
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features Manually로 작업을 하면 옵션을 사용자가 직접 선택할 수 있게된다.
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
>(*) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing여기서 옵션을 선택하기 위해서는 엔터를 누르는 것이 아니라 space bar를 눌러 선택한다.
여기서 기본으로 선택되어 있는 Babel이라는 것은 최신 자바스크립트 문법을 옛날 브라우저에서 인식을 할 수 있게 구버전 자바스크립트로 변환해주는 역할을 수행한다.
Progressive Web App (PWA) Support는 모바일 환경에 특화된 기능이다.
Router는 메뉴를 구성을 하고, 화면을 이동하기 위해 사용하는 기능이다.
Vuex는 모든 뷰 컴포넌트 내에서 공통으로 접근할 수 있는 저장소
Linter는 기본적인 코딩 포멧, 코딩 컨벤션을 할 수 있는 모듈
Unit Testing는 단위 테스트 지원 모듈
E2E(End to End) Testing은 전체 테스트 모듈
옵션 선택이 완료되면, 엔터를 눌러 다음 설정을 진행한다.
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
2.x다음은 버전 선택 부분으로 3.x를 선택한다.
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y뷰는 기본적으로 주소창에 #이 붙는다. 이것을 없애주고 history mode를 사용한다.
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: vue-project결과적으로 해당 옵션들을 선택하여 프로젝트를 생성하면 된다.
npm run server이후 위 명령어로 실행하면 vue프로젝트가 실행된다.
DONE Compiled successfully in 4370ms 오후 10:35:25
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.3:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
성공적으로 설치 및 실행이 완료가 되면 위와 같은 화면이 나오게 된다.
