vue.js 프로젝트 시작하기

vue를 활용하여 프로젝트를 시작하고싶다면,

npm 또는 yarn을 활용하여 js 기반의 문서, 프로그램들을 관리할 수 있다.

 

따라서 npm 을 활용하여 vue 또한 간편하게 관리할 수 있다는 뜻이다

 

 

1. 설치

vue 프로젝트를 생성하기 위해서 18.0 버전 이상의 node.js가 필요하다.

 

npm을 설치한 후, node --version을 실행하여 버전을 확인해보자.

npm create vue@latest

위 명령어를 실행하면, 

vue 프로젝트의 환경설정을 할 수 있다

 

다른 의존성을 추가하지 않고 프로젝트를 생성하면 다음과 같이 package.json을 준다.

사용하고싶은 모듈이 있다면, 여기에 추가하면 되고

없다면 그냥

npm install

해서 의존성들을 설치하자

 

2. vue 빌드하는 방법

package.json 의 scripts 항목은 npm이 실행시킬 수 있는 명령어들을 나타낸다

npm run "명령어"    형태로 사용할 수 있다

vue를 배포하기 용이하게 만들어주는 build를 사용해보자

 

npm run build

build를 하면 현재 프로젝트의 코드들이 압축되어 dist 폴더에 저장되고, 얼마나 용량이 줄어들었는지도 확인할 수 있다

프로젝트를 파이프라인으로 배포하거나, 동기화 할 때 유용할 것이다

 

3. extention 설치

vue를 vs코드에서 사용할 때 Extention은 

이 이미지처럼 (Volar) 가 붙은 extention이 공식적으로 지원되고 있는 것 이므로 적극적으로 활용해보자

 

4. vue 기본적인 작동 방법

프로젝트가 있는 폴더에 index.html이 가장 먼저 진입하는 지점이다.

/src/main.js 란?

이렇게 vue에서 제공하는 모듈을 import 하기도하고,

createApp 으로 vue 객체를 만들어서 use 하고 mount 함으로써 브라우저에 나타낼 수 있게 한다.

 

각각의 크고 작은 vue app들을 불러올 수 있기 때문에, 리액트와 비슷하게 보인다.

 

npm run dev

를 하면 로컬에서 뷰를 실행시킬 수 있게 된다.

개발 서버는 프론트엔드 개발에 용이한 vite 가 실행되었다.

 

리액트와 마찬가지로, 코드가 변하고 저장되면 바로바로 서버에 반영된다.

 

 

5. Composition Vue

뷰는 Optional 방식과 Composition 방식으로 나누어진다.

Optional 방식은 특정 브라우저에서 부분적으로 뷰를 적용시키는데 유리하게 제작되어있고

Composition은 뷰를 기반으로 웹 페이지를 제작하기 용이하다.

 

뷰 문법에 익숙해 질 겸 Compositon을 먼저 시작하도록 하자

 

Composition의 특징으로는 뷰에서 선언한 변수를 별도의 export 없이도 template 내부에서 이용할 수 있다는 점이다.

이 기능을 활용하기 위해서 script 와 style 태그에 꼭 setup과 scoped를 붙이도록 하자.

script 내부에서 좀 더 자유롭게 변수를 선언하고 template 내부에서 사용할 수 있을 것이다